设置为true以使<iframe>无凭据，这意味着其内容将在新的临时上下文中加载。它无法访问与其来源关联的网络、cookie 和存储数据。它使用一个新的、特定于顶级文档生命周期的上下文。作为回报，可以解除 Cross-Origin-Embedder-Policy (COEP) 嵌入规则，因此设置了 COEP 的文档可以嵌入不具备此规则的第三方文档。有关更多详细信息，请参阅 IFrame 无凭据。

csp 实验性

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

height

框架的高度，以 CSS 像素为单位。默认值为 150。

加载

指示浏览器何时加载 iframe

立即加载: 在页面加载时立即加载 iframe（这是默认值）。
延迟加载: 延迟加载 iframe，直到它到达距视觉视口的计算距离（由浏览器定义）。目的是避免在浏览器相当确定需要该框架之前，使用获取框架所需的网络和存储带宽。这在大多数典型用例中提高了性能和成本，特别是通过减少初始页面加载时间。

注意：仅在启用 JavaScript 时才会延迟加载。这是一项反跟踪措施。

名称

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

referrerpolicy

指示在获取框架资源时发送哪个referrer

no-referrer: 不会发送 Referer 标头。
no-referrer-when-downgrade: 不会将 Referer 标头发送到没有 TLS（HTTPS）的源。
origin: 发送的 referrer 将限制为引用页面的源：其方案、主机和端口。
origin-when-cross-origin: 发送到其他源的 referrer 将限制为方案、主机和端口。相同源上的导航仍将包含路径。
same-origin: 将为相同源发送 referrer，但跨源请求将不包含 referrer 信息。
strict-origin: 仅在协议安全级别保持不变（HTTPS→HTTPS）时将文档的源作为 referrer 发送，但不要将其发送到安全性较低的目的地（HTTPS→HTTP）。
strict-origin-when-cross-origin（默认）: 执行相同源请求时发送完整 URL，仅在协议安全级别保持不变（HTTPS→HTTPS）时发送源，并将无标头发送到安全性较低的目的地（HTTPS→HTTP）。
unsafe-url: referrer 将包含源和路径（但不包含片段、密码或用户名）。此值不安全，因为它会将来自 TLS 保护资源的源和路径泄漏到不安全的源。

沙箱

控制应用于嵌入在 <iframe> 中的内容的限制。属性的值可以为空以应用所有限制，或者使用空格分隔的标记来解除特定限制

allow-downloads: 允许通过具有 download 属性的 <a> 或 <area> 元素下载文件，以及通过导致文件下载的导航。无论用户是否单击链接，或者 JS 代码在没有用户交互的情况下启动它，此功能都有效。
allow-forms: 允许页面提交表单。如果不使用此关键字，表单将正常显示，但提交表单不会触发输入验证、将数据发送到 Web 服务器或关闭对话框。
allow-modals: 允许页面通过 Window.alert()、Window.confirm()、Window.print() 和 Window.prompt() 打开模式窗口，同时无论此关键字如何，都允许打开 <dialog>。它还允许页面接收 BeforeUnloadEvent 事件。
allow-orientation-lock: 允许资源锁定屏幕方向。
allow-pointer-lock: 允许页面使用指针锁定 API。
allow-popups: 允许弹出窗口（例如来自 Window.open()、target="_blank"、Window.showModalDialog()）。如果不使用此关键字，该功能将静默失败。
allow-popups-to-escape-sandbox: 允许沙箱文档打开新的浏览上下文，而不会强制其使用沙箱标志。例如，这将允许安全地沙箱化第三方广告，而不会强制对广告链接到的页面施加相同的限制。如果不包含此标志，重定向的页面、弹出窗口或新标签页将受到与原始 <iframe> 相同的沙箱限制。
allow-presentation: 允许嵌入者控制 iframe 是否可以启动演示文稿会话。
allow-same-origin: 如果不使用此标记，则该资源将被视为来自一个特殊的源，该源始终会使同源策略失败（可能会阻止访问数据存储/cookie和某些 JavaScript API）。
allow-scripts: 允许页面运行脚本（但不创建弹出窗口）。如果不使用此关键字，则不允许此操作。
allow-storage-access-by-user-activation 实验性的: 允许在 <iframe> 中加载的文档使用存储访问 API请求访问未分区的 cookie。
allow-top-navigation: 允许资源导航顶级浏览上下文（名为 _top 的上下文）。
allow-top-navigation-by-user-activation: 允许资源导航顶级浏览上下文，但仅在由用户手势启动时才允许。
allow-top-navigation-to-custom-protocols: 允许导航到浏览器内置或网站注册的非 http 协议。此功能也由 allow-popups 或 allow-top-navigation 关键字激活。

注意

当嵌入文档与嵌入页面具有相同的源时，强烈建议不要同时使用 allow-scripts 和 allow-same-origin，因为这会让嵌入文档删除 sandbox 属性——使其安全性不高于根本不使用 sandbox 属性。
如果攻击者可以在沙箱 iframe 之外显示内容（例如，如果查看者在新标签页中打开框架），则沙箱将毫无用处。此类内容也应来自单独的源以限制潜在的损害。

注意：从具有 sandbox 属性的 <iframe> 内的嵌入页面重定向用户、打开弹出窗口或打开新标签页时，新的浏览上下文将受到相同的 sandbox 限制。这可能会导致问题——例如，如果嵌入在没有设置 sandbox="allow-forms" 或 sandbox="allow-popups-to-escape-sandbox" 属性的 <iframe> 中的页面在新标签页中打开一个新站点，则在新浏览上下文中的表单提交将静默失败。

src

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

注意：about:blank 页面在解析任何相对 URL（例如锚链接）时，使用嵌入文档的 URL 作为其基本 URL。

srcdoc

要嵌入的内联 HTML，覆盖 src 属性。其内容应遵循完整 HTML 文档的语法，包括 doctype 指令、<html>、<body> 标记等，尽管其中大多数可以省略，只留下主体内容。此文档将具有 about:srcdoc 作为其位置。如果浏览器不支持 srcdoc 属性，它将回退到 src 属性中的 URL。

注意：about:srcdoc 页面在解析任何相对 URL（例如锚链接）时，使用嵌入文档的 URL 作为其基本 URL。

width

框架的宽度，以 CSS 像素为单位。默认值为 300。

已弃用的属性

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

align 已弃用

此元素相对于周围上下文的对齐方式。

frameborder 已弃用

值 1（默认值）会在该框架周围绘制边框。值 0 会删除该框架周围的边框，但您应该改为使用 CSS 属性 border 来控制 <iframe> 边框。

longdesc 已弃用

框架内容的详细描述的 URL。由于普遍滥用，这对非视觉浏览器没有帮助。

marginheight 已弃用

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

marginwidth 已弃用

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

scrolling 已弃用

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

自动: 仅当框架的内容大于其尺寸时。
是: 始终显示滚动条。
否: 从不显示滚动条。

脚本

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

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

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

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

定位和缩放

作为替换元素，<iframe> 允许使用 object-position 属性调整嵌入文档在其框内的位置。

注意：object-fit 属性对 <iframe> 元素无效。

`error` 和 `load` 事件行为

在 <iframe> 上触发的 error 和 load 事件可用于探测本地网络的 HTTP 服务器的 URL 空间。因此，作为一项安全预防措施，用户代理不会在 <iframe> 上触发 error 事件，并且即使 <iframe> 内容加载失败，也会始终触发 load 事件。

无障碍访问

使用辅助技术（如屏幕阅读器）导航的用户可以使用 <iframe> 上的title 属性为其内容添加标签。标题的值应简洁地描述嵌入的内容

html

<iframe
  title="Wikipedia page for Avocados"
  src="https://en.wikipedia.org/wiki/Avocado"></iframe>

如果没有此标题，他们必须导航到 <iframe> 中才能确定其嵌入的内容是什么。这种上下文切换可能会令人困惑且耗时，尤其是在页面包含多个 <iframe> 和/或嵌入包含视频或音频等交互式内容的情况下。

示例

一个简单的 <iframe>

此示例将 https://example.org 上的页面嵌入到 iframe 中。这是 iframe 的常见用例：嵌入来自另一个站点的內容。例如，实时示例本身以及顶部的试一试示例都是来自另一个 MDN 站点的 <iframe> 嵌入。

HTML

html

<iframe
  src="https://example.org"
  title="iframe Example 1"
  width="400"
  height="300">
</iframe>

结果

在 <iframe> 中嵌入源代码

此示例直接在 iframe 中呈现源代码。这可以用作在显示用户生成的内容时（与 sandbox 属性结合使用）防止脚本注入的技术。

请注意，当使用 srcdoc 时，嵌入内容中的任何相对 URL 将相对于嵌入页面的 URL 解析。如果要使用指向嵌入内容中的位置的锚链接，则需要显式指定 about:srcdoc 作为基本 URL。

HTML

html

<article>
  <footer>Nine minutes ago, <i>jc</i> wrote:</footer>
  <iframe
    sandbox
    srcdoc="<p>There are two ways to use the <code>iframe</code> element:</p>
<ol>
<li><a href=&quot;about:srcdoc#embed_another&quot;>To embed content from another page</a></li>
<li><a href=&quot;about:srcdoc#embed_user&quot;>To embed user-generated content</a></li>
</ol>
<h2 id=&quot;embed_another&quot;>Embedding content from another page</h2>
<p>Use the <code>src</code> attribute to specify the URL of the page to embed:</p>
<pre><code>&amp;lt;iframe src=&quot;https://example.org&quot;&amp;gt;&amp;lt;/iframe&amp;gt;</code></pre>
<h2 id=&quot;embed_user&quot;>Embedding user-generated content</h2>
<p>Use the <code>srcdoc</code> attribute to specify the content to embed. This post is already an example!</p>
"
    width="500"
    height="250"
></iframe>
</article>

以下是如何在使用 srcdoc 时编写转义序列

首先，编写 HTML，转义您在普通 HTML 文档中转义的任何内容（例如 <、>、& 等）。
< 和 < 在 srcdoc 属性中表示完全相同的字符。因此，要使其成为 HTML 文档中的实际转义序列，请将任何与号 (&) 替换为 &。例如，< 变为 &lt;，& 变为 &amp;。
将任何双引号 (") 替换为 " 以防止 srcdoc 属性过早终止（如果使用 '，则应将 ' 替换为 '）。此步骤发生在上一步骤之后，因此在此步骤中生成的 " 不会变为 &quot;。

结果

技术摘要

内容类别	流内容、短语内容、嵌入内容、交互式内容、可感知内容。
允许的内容	无。
标记省略	无，起始和结束标记都是必需的。
允许的父级	任何接受嵌入内容的元素。
隐式 ARIA 角色	没有相应的角色
允许的 ARIA 角色	`application`、`document`、`img`、`none`、`presentation`
DOM 接口	`HTMLIFrameElement`

规范

规范
HTML 标准 # the-iframe-element

浏览器兼容性

BCD 表格仅在浏览器中加载