HTML <iframe> 元素

HTML 内联框架元素（<iframe>） 表示嵌套的浏览上下文，将另一个 HTML 页面嵌入到当前的页面中。

显示一个内联框架：

<iframe src="https://www.mifengjc.com"></iframe>

尝试一下 »

每个嵌入式浏览上下文都有自己的 会话历史记录 和 document。嵌入其他浏览上下文的浏览上下文称为 父浏览上下文。最高的浏览上下文 - 没有父项的浏览上下文 - 通常是浏览器窗口，由 Window 对象表示。

因为每个浏览上下文都是完整的文档环境，所以页面中的每个 <iframe> 都需要增加内存和其他计算资源。虽然理论上你可以根据需要使用尽可能多的 <iframe>，但是请注意检查性能问题。

内容类别	流式内容，短语内容，嵌入内容，交互内容，可触知内容.
允许的内容	后备内容，即通常是不显示出来的内容，不支持 <iframe> 元素的浏览器将显示该内容。（RSS 阅读器和电子邮件客户端通常会显示后备内容。）
标签省略	不允许，开始标签和结束标签都不能省略。
允许的父元素	任何接受 嵌入内容 的元素。
允许的 ARIA 角色	application，document，img
DOM 接口	HTMLIFrameElement

属性

该元素包含了全局属性。

事件属性

<iframe> 元素支持 HTML 的事件属性。

allow

为 <iframe> 指定 feature policy。

allowfullscreen

如果为 true 可以通过调用 requestFullscreen() 方法激活全屏模式。

该属性被视为遗留属性，新的请使用 allow="fullscreen"。

allowpaymentrequest

如果为 true，允许跨源 <iframe> 调用Payment Request API。

该属性被视为遗留属性，新的请使用 allow="payment"。

csp

对嵌入式资源实施内容安全策略。有关详细信息，请参阅 HTMLIFrameElement.csp。

height

框架的 CSS 像素高度。默认为 150。

importance

<iframe> 的 src 属性中资源的下载优先级。允许值：

auto（默认值）

没有偏好。浏览器使用自己的启发式方法来确定资源的优先级。

high

应在其他优先级较低的页面资源之前下载资源。

low

应在其他更高优先级的页面资源之后下载资源。

name

嵌入式浏览上下文的可定位名称。这可以在 <a>，<form> 或 <base> 元素的 target 属性；<input> 或 <button> 元素的 formtarget 属性；或 window.open() 方法中的 windowName 参数中使用。

referrerpolicy

指示在获取框架资源时，要发送的 referrer 头：

• no-referrer：将不发送 Referer 头。
• no-referrer-when-downgrade：如果源站不是 TLS（HTTPS）时，不会发送 Referer 头。如果没有指定任何策略，则这是用户代理的默认行为。
• origin：发送 Referer 来源将仅限于引用页面的来源：包括页面的协议、主机和端口。
• origin-when-cross-origin：导航到其他源时，将限制所包含数据只有协议，主机和端口，而导航到相同的源将包含来源者的完整路径。
• same-origin：在同源的请求下，将发送 referrer，但跨域请求将不包含 referrer 信息。
• strict-origin：当目的页面是安全的（HTTPS->HTTPS）才发送文档的 origin 作为 referrer，如果是相比不安全则不发送（HTTPS->HTTP）。
• strict-origin-when-cross-origin：同源的请求下发送完整的 URL，当目的页面是安全的（HTTPS->HTTPS）才发送文档的 origin，如果目的页面相比不安全（HTTPS->HTTP）则不发送任何头。
• unsafe-url：Referer 头将包含源站和路径，但不包括片段（fragment），密码或用户名。该值是不安全的，因为它可能会将受 TLS 保护的资源中的源和路径，泄露到不安全的源。

sandbox

对框架中的内容应用额外限制。属性的值可以为空以应用所有限制，也可以为空格分隔的标记以解除特定限制：

• allow-forms：允许资源提交表单。如果未使用此关键字，则会阻止表单提交。
• allow-modals：允许资源打开模态窗口。
• allow-orientation-lock：允许资源锁定屏幕方向。
• allow-pointer-lock：允许资源使用 Pointer Lock API。
• allow-popups：允许弹出窗口（例如 window.open() ，target="_blank" 或 showModalDialog()）。如果未使用此关键字，则弹出窗口将无法打开。
• allow-popups-to-escape-sandbox：允许沙盒文档打开新窗口，而不会继承沙盒的窗口。例如，这可以安全地沙箱化广告，而不会对广告链接到的页面施加相同的限制。
• allow-presentation：允许资源启动演示会话。
• allow-same-origin：如果未使用此标识，则资源将被视为来自始终未通过 同源策略 的特殊来源。
• allow-scripts：允许资源运行脚本（但不创建弹出窗口）。
• allow-storage-access-by-user-activation ：允许资源使用 Storage Access API 请求访问父服务器的存储功能。
• allow-top-navigation：允许资源导航顶级浏览上下文（名为 _top 的上下文）。
• allow-top-navigation-by-user-activation：允许资源导航顶级浏览上下文，但仅限于由用户手势启动。

关于沙盒的注意事项：

• 当嵌入文档与嵌入页面具有相同的源时，强烈建议不要同时使用 allow-scripts 和 allow-same-origin，因为这样可以使嵌入文档删除 sandbox 属性 - 这样比不使用 sandbox 属性更不安全。
• 如果攻击者可以在沙盒 iframe 之外显示内容，则沙盒是无用的 - 例如，如果查看者能够在新选项卡中打开框架。此类内容也应该以单独的源（例如单独域名）来限制潜在的损害。
• Internet Explorer 9 及更早版本中不支持 sandbox 属性。

src

要嵌入的页面的 URL。使用值 about:blank 来嵌入的空页面符合同源策略。另请注意，以编程方式删除 <iframe> 的 src 属性（例如，通过 Element.removeAttribute()）会导致在 Firefox（从版本 65 开始），基于 Chromium 的浏览器和 Safari/iOS 的框架中加载 about:blank。

srcdoc

要嵌入的内联 HTML，覆盖 src 属性。如果浏览器不支持 srcdoc 属性，它将回退到 src 属性中的 URL。

width

框架的 CSS 像素宽度。默认为 300。

废弃的属性

这些属性是已经废弃了，并且所有用户代理可能不再支持这些属性。您不应在新内容中使用它们，并尝试将其从现有内容中删除。

align 已废弃 HTML4.01, 已过时 HTML5

该元素相对于周围环境的对齐方式。

frameborder 已过时 HTML5

值 1（默认值）表示在此框架周围绘制边框。值 0 表示删除了此框架周围的边框。您应该使用 CSS 属性 border 来控制 <iframe> 边框。

longdesc 已过时 HTML5

框架内容的长描述的 URL。该属性被滥用，其非可视浏览器没有帮助。

marginheight 已过时 HTML5

框架内容与其顶部和底部边框之间的空间量（以像素为单位）。

marginwidth 已过时 HTML5

框架内容与其左右边框之间的空间量（以像素为单位）。

scrolling 已过时 HTML5

指示浏览器何时应为框架提供滚动条：

• auto：仅当框架的内容大于其尺寸时。
• yes：始终显示滚动条。
• no：永远不会显示滚动条。

非标准属性

mozbrowser

有关支持在 Firefox 的 WebExtensions 中使用该内容，请参阅 Mozilla bug 1318532。
See Mozilla bug 1318532 for exposing this to WebExtensions in Firefox.

使 <iframe> 行为象顶级浏览器窗口一样。有关详细信息，请参阅浏览器 API。
仅适用于 WebExtensions。

脚本操作

内联框架，例如 <frame> 元素，是包含在 window.frames 伪数组中。

使用 DOM HTMLIFrameElement 对象，脚本可以通过 contentWindow 访问框架资源的 window 对象属性。 contentDocument 属性指向 <iframe> 中的 document ，与 contentWindow.document 相同。

在框架内部，脚本可以使用 window.parent 获取对其父窗口的引用。

对框架内容的脚本访问受 同源政策 的约束。如果脚本是从不同的源加载的，则脚本无法访问其他 window 对象中的大多数属性，包括访问框架父级的框架内的脚本。可以使用 Window.postMessage() 来实现跨源通信。

定位和缩放

作为替换元素，可以使用 object-position 和 object-fit 属性调整 <iframe> 元素框中嵌入文档的位置, 对齐和缩放。

实例

一个简单的 <iframe>

一个 <iframe> 实例。创建框架后，当用户单击按钮时，将弹出提示框显示标题。

<iframe src="https://www.mifengjc.com/examples/iframe-alert-title/result.html" title="iframe 实例 1" width="400" height="300">
  <p>您的浏览器不支持 iframes。</p>
</iframe>

尝试一下 »

在另一个选项卡中的 <iframe> 中打开一个链接

在此实例中，Google 地图显示在框架中；

<iframe id="Example2"
    title="iframe Example 2"
    width="400" height="300"
    style="border:none"
    src="https://maps.google.com/maps?f=q&source=s_q&q=buenos+aires&sll=37.0625,-95.677068&sspn=38.638819,80.859375&t=h&hnear=Buenos+Aires,+Argentina&z=11&ll=-34.603723,-58.381593&output=embed">
</iframe>

尝试一下 »

可访问性问题

使用辅助技术（如屏幕阅读器）导航的人可以在 iframe 上通过 title 属性来了解其内容。标题的值应简明扼要地描述嵌入的内容：

<iframe title="Avocados 的维基百科页面" src="https://en.wikipedia.org/wiki/Avocado"></iframe>

尝试一下 »

如果没有这个标题，他们必须导航到 iframe 以确定它的嵌入内容是什么。这种上下文转换可能会令人困惑和耗时，特别是对于具有多个 <iframe> 的页面和/或嵌入包含视频或音频等交互式内容的页面。

规范

规范	状态	备注
Referrer Policy referrerpolicy attribute 的定义	编者的草案	添加了 referrerpolicy 属性。
HTML Living Standard	现行的标准	-
HTML5	推荐	-
HTML 4.01 Specification	推荐	-
Screen Orientation API	工作草案	sandbox 属性添加了 allow-orientation-lock 值。
Presentation API allow-presentation 的定义	候选推荐	sandbox 属性添加了 allow-presentation 值。

桌面浏览器兼容性

移动浏览器兼容性

1. 由于 bug 680823，resize CSS 属性对此元素没有任何作用。

2. Safari 有一个 bug，如果在添加到页面的 iframe 是隐藏的，将不会加载 iframe。iframeElement.src = iframeElement.src 可以让 iframe 加载。

相关链接

• HTML 教程：HTML 框架
• HTML DOM 参考手册：IFrame 对象