iframe

HTML内联框架元素 \<iframe>表示嵌套的浏览上下文，有效地将另一个HTML页面嵌入到当前页面中。在HTML 4.01中，文档可能包含头部和正文，或头部和框架集，但不能包含正文和框架集。但是，\<iframe>可以在正常的文档主体中使用。每个浏览上下文都有自己的会话历史记录和活动文档。包含嵌入内容的浏览上下文称为父浏览上下文。顶级浏览上下文（没有父级）通常是浏览器窗口。

属性

该元素包含全局属性。

align已废弃HTML4.01,已废弃HTML5在包含此元素的上下文环境中的对齐方式frameborderHTML 4only取值为1时（默认值），告诉浏览器在当前iframe与其他iframe之间绘制边框，取0时则无需绘制此边框。

height以CSS像素格式HTML5，或像素格式HTML 4.01，或百分比格式指定frame的高度。

longdescHTML 4only指向frame详细描述的URI（统一资源标识符），因为广泛乱用，该属性在非视觉浏览器中没什么作用。

marginheightHTML 4only框架内容到框架的上下边距，以像素格式表示。

marginwidthHTML 4only框架内容到框架的左右边距，以像素格式表示。

mozallowfullscreen使用allowfullscreen属性代替。在Gecko9.9及更高版本上，如果允许通过调用element.mozRequestFullScreen()方法，设置frame为全屏模式，该属性被设置为true。如果该属性未被设置，iframe元素不能被设置为全屏模式。

webkitallowfullscreen使用 allowfullscreen 属性代替。在Chrome 17及更高版本上（或者更早），如果允许通过调用element.webkitRequestFullScreen()方法，设置iframe为全屏模式，该属性被设置为true，如果该属性未被设置，iframe元素不能被设置为全屏模式。

mozapp只有在火狐 OSFor 框架托管 anopen web 应用程序, 这指定了 app 的 URL。这样可以确保使用正确的权限加载应用程序。查看浏览器 API 寻找详细信息。

mozbrowser只有在火狐 OSIndicates, 框架是出现像一个顶层浏览器窗口的嵌入内容。这意味着窗口. 顶部, 窗口. frameElement 等将不反映框架层次结构。这使得 web 浏览器 UI 可以完全使用 web 技术实现, 并赋予了正确的权限。有关详细信息, 请参阅使用浏览器 API。可在壁虎13.0 和更高版本。

name嵌入的浏览上下文（框架）的名称。该名称可以用作<a>标签，<form>标签的target属性值，或<input>标签和<button>标签的formtaget属性值。

remote只有 Firefox 上的 OSLoad 在一个单独的内容过程中提供了框架的页面。

referrerpolicy一个字符串,指示在获取资源时要使用的引用:

• "no-referrer"这意味着Referer:头不会被发送。

<!---->

• “ no-referrer-when-downgrade”表示Referer:当导航到没有TLS（HTTPS）的原点时，不会发送标题。如果没有另外指定策略，这是用户代理的默认行为。

<!---->

• "origin" 这意味着引用者将成为页面的来源，即大致的方案，主机和端口。

<!---->

• "origin-when-cross-origin" 这意味着对其他出发地的导航将仅限于该方案，主机和端口，同一来源的导航将包括引用者的路径。

<!---->

• "unsafe-url"这意味着引用者将包括来源和路径（但不包括片段，密码或用户名）。这种情况是不安全的，因为它可以将来自TLS保护的资源的起点和路径泄漏到不安全的起点。

scrollingHTML4 仅枚举属性,指示浏览器应为框架提供滚动条(或其他滚动设备)的时间:

• auto: 只在需要时设置

<!---->

• yes: 总有滚动条

<!---->

• no: 没有滚动条

sandboxHTML5only如果指定了空字符串，该属性对呈现在iframe框架中的内容启用一些额外的限制条件。属性值可以是用空格分隔的一系列指定的字符串。有效的值有：

• 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: 允许嵌入者控制是否iframe启用一个展示会话。

<!---->

• allow-same-origin: 允许将内容作为普通来源对待。如果未使用该关键字，嵌入的内容将被视为一个独立的源。

<!---->

• allow-scripts: 允许嵌入的浏览上下文运行脚本（但不能window创建弹窗）。如果该关键字未使用，这项操作不可用。

<!---->

• allow-top-navigation:嵌入的页面的上下文可以导航（加载）内容到顶级的浏览上下文环境（browsing context）。如果未使用该关键字，这个操作将不可用。

<!---->

• allow-top-navigation-by-user-activation：允许嵌入式浏览上下文仅在由用户手势启动时将内容导航（加载）到顶层浏览上下文。如果不使用该关键字，则不允许该操作。

注意:

• 当被嵌入的文档与主页面同源时，强烈建议不要同时使用allow-scripts和allow-same-origin，否则的话将允许嵌入的文档通过代码删除sandbox属性。虽然你可以这么做，但是这样的话其安全性还不如不用sandbox。

<!---->

• 如果攻击者可以将潜在的恶意内容往用户的已沙箱化的iframe中显示，那么沙箱操作的安全性将不再可靠。推荐把这种内容放置到独立的专用域中，减小可能的损失。

<!---->

• 沙箱属性(sandbox)在Internet Explorer 9及更早的版本上不被支持

src嵌套页面的URL地址。使用遵守同源策略的  'about:blank' 来嵌套空白页。

srcdocHTML5only该属性值可以是HTML代码，这些代码会被渲染到iframe中，如果同时指定了src属性，srcdoc会覆盖src所指向的页面。该属性最好能与sandbox和seamless属性一起使用。

width以CSS像素格式HTML5，或以像素格式HTML 4.01，或以百分比格式指定frame的宽度。

脚本

内联的框架，就像 \<frame> 元素一样，会加入 window.frames 伪数组（类数组的对象）中。

通过contentWindow属性，脚本可以访问iframe元素所包含的HTML页面的window对象。contentDocument属性则引用了iframe中的文档元素（等同于使用contentWindow.document），但IE8-不支持。

通过访问window.parent，脚本可以从框架中引用它的父框架的window。

脚本试图访问的框架内容必须遵守同源策略，并且无法访问非同源的window对象的几乎所有属性。同源策略同样适用于子窗体访问父窗体的window对象。跨域通信可以通过window.postMessage来实现。

示例

有一些例子来展示如何操作<iframe>

<iframe>简单示例

这是一个<iframe>的基本例子。在创建框架之后，当用户点击一个按钮时，其标题被检索并显示在警报中。

HTML

代码语言：javascript

**复制

<iframe src="https://mdn-samples.mozilla.org/snippets/html/iframe-simple-contents.html" title="iframe example 1" width="400" height="300">
  <p>Your browser does not support iframes.</p>
</iframe>

输出结果

<iframe>在另一个标签中打开链接

在这个例子中，Google地图显示在一个框架中;

HTML

代码语言：javascript

**复制

<base target="_blank">
<iframe id="Example2"
    title="Example2"
    width="400"
    height="300"
    frameborder="0"
    scrolling="no"
    marginheight="0"
    marginwidth="0"
    src="https://maps.google.com/maps?f=q&amp;source=s_q&amp;hl=es-419&amp;geocode=&amp;q=buenos+aires&amp;sll=37.0625,-95.677068&amp;sspn=38.638819,80.859375&amp;t=h&amp;ie=UTF8&amp;hq=&amp;hnear=Buenos+Aires,+Argentina&amp;z=11&amp;ll=-34.603723,-58.381593&amp;output=embed">
</iframe>


<br>
<small>
  <a href="https://maps.google.com/maps?f=q&amp;source=embed&amp;hl=es-419&amp;geocode=&amp;q=buenos+aires&amp;sll=37.0625,-95.677068&amp;sspn=38.638819,80.859375&amp;t=h&amp;ie=UTF8&amp;hq=&amp;hnear=Buenos+Aires,+Argentina&amp;z=11&amp;ll=-34.603723,-58.381593" style="color:#0000FF;text-align:left"> See bigger map </a>
</small>

返回值

返回值

Live example

注意事项

从Gecko 6.0开始，内联框架的渲染在使用四舍五入时正确地尊重了包含它们的元素的边界border-radius。

规范

浏览器兼容性