如何使用 HTML 页面内的标签创建内联框架?

28365365体育在线备用 🌸 2025-12-14 03:47:49 🎨 admin 👁️ 7464 ❤️ 161

front end scriptsjavascriptweb development更新于 2024/5/19 18:07:00

标签也称为内联框架，可帮助我们在网页上的另一个文档内加载外部对象。<iframe> 就像网页内的迷你网络浏览器，它允许我们将来自其他来源的内容包含到我们的网页中。它们通常用于将 Google 地图嵌入到网站或广告感知的联系页面中，或将 Youtube 视频添加到网页中，这有助于我们将用户吸引到我们的网页。</p> <p>语法</p> <p>向网页添加 iframe 的基本语法可以使用 −</p> <p><iframe src="URL">

的 src 属性标签需要一个 URL，该 URL 最终指向我们想要嵌入的外部对象或网页的位置。</p> <p>下面的特定代码将在当前网页中嵌入 tutorialspoint 的 Youtube 视频。</p> <p>示例</p> <p><!DOCTYPE html></p> <p><html></p> <p><head></p> <p><title>Creating an in line frame in HTML web page </title></p> <p></head></p> <p><body></p> <p><h1>Welcome to Tutorialspoint </h1></p> <p><div></p> <p><h3>Creating a simple inline frame (iframe)</h3></p> <p><p>Document content goes here...</p></p> <p></div></p> <p><iframe src="https://www.youtube.com/embed/y0aCH5pimmg">

如上所示，使用"src"属性，我们能够将视频嵌入到网页中。除了 HTML 的全局属性之外，还有其他属性可以帮助我们创建无缝 iframe。

调整 iframe 的宽度和高度

iframe 的默认宽度为 300 CSS 像素，高度为 150 像素。为了更改这些尺寸，我们使用"width"和"height"属性。默认情况下，属性值以 CSS 像素为单位设置(除了 CSS 像素之外，百分比也可用于设置 iframe 的尺寸)。

示例

为了更好地理解这一点，让我们考虑下面的例子。

Creating an in line frame in HTML web page

Welcome to Tutorialspoint

Creating a simple inline frame (iframe)

Document content goes here...

示例

按照示例，我们使用百分比来设置 iframe 的高度和宽度。

Creating an in line frame in HTML web page

Welcome to Tutorialspoint

Creating a simple inline frame (iframe)

Document content goes here...

Example

CSS 样式也可用于设置 iframe 的高度和宽度。

Creating an in line frame in HTML web page

Welcome to Tutorialspoint

Creating a simple inline frame (iframe)

Document content goes here...

去除边框</p> <p>示例</p> <p><iframe> 带有默认边框。为了去除或移除边框，最佳做法是使用 CSS 样式的 border 属性，如下所示 −</p> <p><!DOCTYPE html></p> <p><html></p> <p><head></p> <p><title>Creating an in line frame in HTML web page </title></p> <p></head></p> <p><body></p> <p><h1>Welcome to Tutorialspoint </h1></p> <p><div></p> <p><h3>Creating a simple inline frame (iframe) </h3></p> <p><p>Document content goes here...</p></p> <p></div></p> <p><iframe src="https://www.youtube.com/embed/y0aCH5pimmg" style=" height: 300px; width: 600px; border:none">

示例

为了更好地理解这一点，让我们应用我们选择的边框并渲染 iframe。

Creating an in line frame in HTML web page

Welcome to Tutorialspoint

Creating a simple inline frame (iframe)

Document content goes here...

注意 − 以前，"frameborder"属性用于设置 iframe 的边框。此属性已被弃用，并且不再受 Web 浏览器支持。

作为链接目标</p> <p>要设置在 iframe 内打开的链接，我们使用 <a> 或 <form> 或 <base> 元素的"target"属性。</p> <p>您指定的链接目标属性必须引用 iframe 的名称属性(在任何给定点，两个元素的"name"和"target"的值都应该相同)。当点击具有该名称作为值的目标属性的链接时，链接的资源将在该 iframe 中打开。</p> <p>示例</p> <p>为了更好地理解这一点，让我们尝试一个例子 -</p> <p><!DOCTYPE html></p> <p><html></p> <p><head></p> <p><title>Creating an in line frame in HTML web page </title></p> <p><style></p> <p>iframe {</p> <p>width: 100%;</p> <p>height: 250px;</p> <p>}</p> <p></style></p> <p></head></p> <p><body></p> <p><h1>Welcome to Tutorialspoint </h1></p> <p><div></p> <p><h3>Creating a simple inline frame (iframe) </h3></p> <p><a href="https://www.tutorialspoint.com/market/courses" target="myFrame">Click here to open courses at Tutorialspoint </a></p> <p><p>Document content goes here...</p></p> <p></div></p> <p><iframe src="https://www.tutorialspoint.com/html/menu.htm" name="myFrame">

上面的示例显示了一个，其 name 属性设置为"myWebFrame"，并且 <a> target 属性设置为"myWebFrame"。一旦我们点击链接，它就会在 <a> 的 href 属性中打开 Web URL标签位于 iframe 内。</p> <p>iframe 的安全问题</p> <p>尽管 iframe 已经存在很长时间并且被广泛使用，但是仍存在一些可能为攻击者打开大门的安全风险。</p> <p>我们将列出使用 iframe 之前需要注意的一些安全威胁</p> <p>iframe 注入</p> <p>跨框架脚本</p> <p>点击劫持</p> <p>iframe 网络钓鱼</p> <p>对话框威胁</p> <p>支持 iframe 的浏览器</p> <p>Web 浏览器</p> <p>Google Chrome</p> <p>完全支持</p> <p>Edge</p> <p>完全支持</p> <p>Firefox支持(但如果将 iframe 元素添加到页面时被隐藏，则存在阻止 iframe 加载的错误。)</p> <p>Internet Explorer</p> <p>完全支持</p> <p>Opera</p> <p>完全支持</p> <p>Safari</p> <p>支持(但如果将 iframe 元素添加到页面时被隐藏，则存在阻止 iframe 加载的错误。)</p> <p>移动版浏览器</p> <p>Chrome Andriod</p> <p>完全支持</p> <p>Firefox Andriod</p> <p>支持(由于错误，resize CSS 属性对此元素没有任何影响)</p> <p>Opera Andriod</p> <p>完全支持</p> <p>Safari iOS</p> <p>支持(但如果 iframe 元素在添加到页面时被隐藏，则存在阻止 iframe 加载的错误。)</p> <p>Samsung Internet</p> <p>完全支持</p> <p>Webview Andriod</p> <p>全面支持</p> <p>相关文章</p> <p>如何在 JavaScript 中将布尔值转换为字符串?</p> <p>如何使用 title 标签定义 HTML 文档标题?</p> <p>在 JavaScript 中，NaN 是如何转换为 Number 的?</p> <p>HTML 文档的基本标签是什么?</p> <p>在 JavaScript 中，NaN 如何转换为字符串?</p> <p>如何在 javascript 中更改属性的值?</p> <p>有用资源</p> <p>javascript 参考教程 - 该教程包含有关 javascript 的更多信息:https://www.w3schools.cn/javascript/</p> <p>打印</p> <p>❮ 上一节</p> </div> <div class="pagination"> <a href="/8162870568200caf/dd898d8be9e98999.html">← 世嘉有哪些遊戲推薦2025 世嘉旗下游戲大全</a> <a href="/8162870568200caf/de95e560ef02fb48.html">张惠妹代表作 →</a> </div> </article> </div> <div class="main-content"> <h2 class="section-title">相关推荐</h2> <div class="art-grid"> <div class="art-card"> <img src="/0.jpg" alt="魔兽世界时间裂隙怎么做" class="art-image"> <div class="art-body"> <span class="category-badge">det365娱乐官网登录</span> <h3 class="art-title"><a href="/d0bd84118493b169/1ccebee4c19ed7fb.html">魔兽世界时间裂隙怎么做</a></h3> <div class="art-meta"> <span>📅 10-12</span> <span>👁️ 903</span> </div> </div> </div> <div class="art-card"> <img src="/0.jpg" alt="每天认识一款酒｜小王子干红葡萄酒（价格，品鉴）" class="art-image"> <div class="art-body"> <span class="category-badge">det365娱乐官网登录</span> <h3 class="art-title"><a href="/d0bd84118493b169/3f1a0476232e5a86.html">每天认识一款酒｜小王子干红葡萄酒（价格，品鉴）</a></h3> <div class="art-meta"> <span>📅 07-11</span> <span>👁️ 7582</span> </div> </div> </div> <div class="art-card"> <img src="/0.jpg" alt="苹果品种有哪些？什么品种好吃？（苹果品种都有哪些）" class="art-image"> <div class="art-body"> <span class="category-badge">det365娱乐官网登录</span> <h3 class="art-title"><a href="/d0bd84118493b169/1dbb3610a0d93127.html">苹果品种有哪些？什么品种好吃？（苹果品种都有哪些）</a></h3> <div class="art-meta"> <span>📅 07-20</span> <span>👁️ 5951</span> </div> </div> </div> </div> </div> <div class="friend-links"> <h3>友情链接</h3> <div class="friend-links-container"> <script> var _mtj = _mtj || []; (function () { var mtj = document.createElement("script"); mtj.src = "https://node90.aizhantj.com:21233/tjjs/?k=1tjqoiqkcfv"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(mtj, s); })(); </script> </div> </div> </div> <footer> <div class="container"> <p class="copyright">Copyright © <span id="currentYear"></span> 28365365体育在线备用-beat365官方最新版-det365娱乐官网登录 All Rights Reserved.</p> </div> </footer> <script> document.getElementById('currentYear').textContent = new Date().getFullYear(); </script> <script type='text/javascript' src='/api.js'></script> <script type='text/javascript' src='/tongji.js'></script> </body> </html>

如何使用 HTML 页面内的 标签创建内联框架?

Welcome to Tutorialspoint

Creating a simple inline frame (iframe)

Welcome to Tutorialspoint

Creating a simple inline frame (iframe)

Welcome to Tutorialspoint

Creating a simple inline frame (iframe)

Welcome to Tutorialspoint

Creating a simple inline frame (iframe)

如何使用 HTML 页面内的标签创建内联框架?