path: root/files/zh-cn/web/html/element/iframe/index.html

---
title: <iframe>
slug: Web/HTML/Element/iframe
tags:
  - <iframe>
  - CORS
  - Content
  - HTML5
  - iframe.contentWindow.document
translation_of: Web/HTML/Element/iframe
---
<div>{{HTMLRef}}</div>

<p><strong>HTML内联框架元素 (<code>&lt;iframe&gt;</code>)</strong> 表示嵌套的<span class="seoSummary">{{Glossary("browsing context")}}</span>。它能够将另一个HTML页面嵌入到当前页面中。</p>

<div>{{EmbedInteractiveExample("pages/tabbed/iframe.html", "tabbed-standard")}}</div>

<div class="hidden">这个示例的源代码存储在GitHub仓库中。如果你想给这个项目贡献代码，请克隆 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples </a>仓库并给我们提交 pull request。</div>

<p>每个嵌入的浏览上下文（embedded browsing context）都有自己的<a href="/zh-CN/docs/Web/API/History">会话历史记录(session history)</a>和<a href="/zh-CN/docs/Web/API/Document">DOM树</a>。包含嵌入内容的浏览上下文称为<em><dfn>父级</dfn>浏览上下文</em>。顶级浏览上下文（没有父级）通常是由 {{domxref("Window")}} 对象表示的浏览器窗口。</p>

<div class="blockIndicator warning">
<p>页面上的每个<code>&lt;iframe&gt;</code>都需要增加内存和其它计算资源，这是因为每个浏览上下文都拥有完整的文档环境。虽然理论上来说你能够在代码中写出来无限多的<code>&lt;iframe&gt;</code>，但是你最好还是先看看这么做会不会导致某些性能问题。</p>
</div>

<h2 id="属性">属性</h2>

<p>该元素包含<a href="/zh-CN/docs/Web/HTML/Global_attributes" title="Global_attributes">全局属性</a>。</p>

<dl>
 <dt>{{htmlattrdef("allow")}}</dt>
 <dd>用于为<code>&lt;iframe&gt;</code>指定其<a href="/zh-CN/docs/Web/HTTP/策略特征">特征策略</a>.</dd>
</dl>

<dl>
 <dt>{{htmlattrdef("allowfullscreen")}}</dt>
 <dd>设置为<code>true</code>时，可以通过调用 <code>&lt;iframe&gt;</code> 的 {{domxref("Element.requestFullscreen", "requestFullscreen()")}} 方法激活全屏模式。</dd>
 <dd>
 <div class="note">这是一个历史遗留属性，已经被重新定义为 <code>allow="fullscreen"</code>。</div>
 </dd>
 <dt>{{htmlattrdef("allowpaymentrequest")}}</dt>
 <dd>设置为<code>true</code>时，跨域的 <code>&lt;iframe&gt;</code> 就可以调用 <a href="https://developer.mozilla.org/en-US/docs/Web/API/Payment_Request_API">Payment Request API</a>。</dd>
 <dd>
 <div class="note">这是一个历史遗留属性，已经被重新定义为 <code>allow="payment"</code>.</div>
 </dd>
 <dt>{{htmlattrdef("csp")}} {{experimental_inline}}</dt>
 <dd>对嵌入的资源配置<a href="/zh-CN/docs/Web/HTTP/CSP">内容安全策略</a>。 查看 {{domxref("HTMLIFrameElement.csp")}} 获取详情。</dd>
 <dt>{{htmlattrdef("height")}}</dt>
 <dd>以CSS像素格式<span style="line-height: inherit;">{{HTMLVersionInline(5)}}，或像素格式{{HTMLVersionInline(4.01)}}，或百分比格式指定frame的高度。默认值为<code>150</code>。</span></dd>
 <dt id="name-attribute">{{htmlattrdef("importance")}} {{experimental_inline}}</dt>
 <dd>表示 <code>&lt;iframe&gt; </code>的 <code>src</code> 属性指定的资源的加载优先级。允许的值有：
 <dl>
  <dt><code>auto</code> (default)</dt>
  <dd>不指定优先级。浏览器根据自身情况决定资源的加载顺序</dd>
  <dt><code>high</code></dt>
  <dd>资源的加载优先级较高</dd>
  <dt><code>low</code></dt>
  <dd>资源的加载优先级较低</dd>
 </dl>
 </dd>
 <dt>{{htmlattrdef("name")}}</dt>
 <dd>用于定位嵌入的浏览上下文的名称。该名称可以用作 <span style="line-height: inherit;">{{HTMLElement("a")}} 标签与 {{HTMLElement("form")}} 标签的 <code>target</code> 属性值，也可以用作 {{HTMLElement("input")}} 标签和 {{HTMLElement("button")}} 标签的 <code>formtarget</code> 属性值，还可以用作</span> {{domxref("Window.open()","window.open()")}} 方法的 <code>windowName</code> 参数值。</dd>
 <dt id="attr-referrer">{{htmlattrdef("referrerpolicy")}}</dt>
 <dd>表示在获取 iframe 资源时如何发送 <a href="https://developer.mozilla.org/en-US/docs/Web/API/Document/referrer">referrer</a> 首部：
 <ul>
  <li><code>no-referrer</code>: 不发送 {{HTTPHeader("Referer")}} 首部。</li>
  <li><code>no-referrer-when-downgrade</code> (default): 向不受 {{Glossary("TLS")}} ({{Glossary("HTTPS")}}) 保护的 {{Glossary("origin")}} 发送请求时，不发送 {{HTTPHeader("Referer")}} 首部。</li>
  <li><code>origin</code>: referrer 首部中仅包含来源页面的源。换言之，仅包含来源页面的 <a href="https://developer.mozilla.org/en-US/docs/Archive/Mozilla/URIScheme">scheme</a>, {{Glossary("host")}}, 以及 {{Glossary("port")}}。</li>
  <li><code>origin-when-cross-origin</code>: 发起跨域请求时，仅在 referrer 中包含来源页面的源。发起同源请求时，仍然会在 referrer 中包含来源页面在服务器上的路径信息。</li>
  <li><code>same-origin</code>: 对于 {{Glossary("Same-origin policy", "same origin")}} （同源）请求，发送 referrer 首部，否则不发送。</li>
  <li><code>strict-origin</code>: 仅当被请求页面和来源页面具有相同的协议安全等级时才发送 referrer 首部（比如从采用 HTTPS 协议的页面请求另一个采用 HTTPS 协议的页面）。如果被请求页面的协议安全等级较低，则不会发送 referrer 首部（比如从采用 HTTPS 协议的页面请求采用 HTTP 协议的页面）。</li>
  <li><code>strict-origin-when-cross-origin</code>: 当发起同源请求时，在 referrer 首部中包含完整的 URL。当被请求页面与来源页面不同源但是有相同协议安全等级时（比如 HTTPS→HTTPS），在 referrer 首部中仅包含来源页面的源。当被请求页面的协议安全等级较低时（比如 HTTPS→HTTP），不发送 referrer 首部。</li>
  <li><code>unsafe-url</code>: 始终在 referrer 首部中包含源以及路径 （但不包括 <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLHyperlinkElementUtils/hash">fragment</a>，<a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLHyperlinkElementUtils/password">密码</a>，或<a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLHyperlinkElementUtils/username">用户名</a>）。<strong>这个值是不安全的</strong>, 因为这样做会暴露受 TLS 保护的资源的源和路径信息。</li>
 </ul>
 </dd>
 <dt>{{htmlattrdef("sandbox")}}</dt>
 <dd>该属性对呈现在 iframe 框架中的内容启用一些额外的限制条件。属性值可以为空字符串（这种情况下会启用所有限制），也可以是用空格分隔的一系列指定的字符串。有效的值有：
 <ul>
  <li><code>allow-downloads-without-user-activation</code> {{experimental_inline}}: 允许在没有征求用户同意的情况下下载文件.</li>
  <li><code>allow-forms</code>: 允许嵌入的浏览上下文提交表单。如果没有使用该关键字，则无法提交表单。</li>
  <li><code>allow-modals</code>: 允许嵌入的浏览上下文打开模态窗口。</li>
  <li><code>allow-orientation-lock</code>: 允许嵌入的浏览上下文锁定屏幕方向（译者注：比如智能手机、平板电脑的水平朝向或垂直朝向）。</li>
  <li><code>allow-pointer-lock</code>: 允许嵌入的浏览上下文使用 <a href="/zh-CN/docs/API/Pointer_Lock_API">Pointer Lock API</a>.</li>
  <li><code>allow-popups</code>: 允许弹窗 (例如 window.open, target="_blank", <code>showModalDialog</code>)。如果没有使用该关键字，相应的功能将自动被禁用。</li>
  <li><code>allow-popups-to-escape-sandbox</code>:  允许沙箱化的文档打开新窗口，并且新窗口不会继承沙箱标记。例如，安全地沙箱化一个广告页面，而不会在广告链接到的新页面中启用相同的限制条件。</li>
  <li><code>allow-presentation</code>: 允许嵌入的浏览上下文开始一个<a href="https://developer.mozilla.org/en-US/docs/Web/API/PresentationRequest"> presentation session</a>。</li>
  <li><code>allow-same-origin</code>: 如果没有使用该关键字，嵌入的浏览上下文将被视为来自一个独立的源，这将使 {{Glossary("same-origin policy")}} 同源检查失败。</li>
  <li><code>allow-scripts</code>: 允许嵌入的浏览上下文运行脚本（但不能创建弹窗）。如果没有使用该关键字，就无法运行脚本。</li>
  <li><code>allow-storage-access-by-user-activation</code> {{experimental_inline}}: 允许嵌入的浏览上下文通过 <a href="https://developer.mozilla.org/en-US/docs/Web/API/Storage_Access_API">Storage Access API</a> 使用父级浏览上下文的存储功能。</li>
  <li><code>allow-top-navigation</code>: 允许嵌入的浏览上下文导航（加载）内容到顶级的浏览上下文。</li>
  <li><code>allow-top-navigation-by-user-activation</code>: 允许嵌入的浏览上下文<u><strong>在经过用户允许后</strong></u>导航（加载）内容到顶级的浏览上下文。</li>
 </ul>

 <div class="note">
 <p><strong>注意:</strong></p>

 <ul>
  <li>当被嵌入的文档与主页面同源时，强烈建议不要同时使用 <code>allow-scripts</code> 和 <code>allow-same-origin</code>。如果同时使用，嵌入的文档就可以通过代码删除 <code>sandbox</code> 属性，如此，就安全性而言还不如不用<code>sandbox</code>。</li>
  <li>如果攻击者可以在沙箱化的 <code>iframe</code> 之外展示内容，例如用户在新标签页中打开内联框架，那么沙箱化也就没有意义了。建议把这种内容放置到独立的专用域中，以减小可能的损失。</li>
  <li>沙箱属性(sandbox)在Internet Explorer 9及更早的版本上不被支持。</li>
 </ul>
 </div>
 </dd>
 <dt>{{htmlattrdef("src")}}</dt>
 <dd>被嵌套的页面的 URL 地址。使用 <code>about:blank</code> 值可以嵌入一个遵从<a href="/zh-CN/docs/Web/Security/Same-origin_policy">同源策略</a>的空白页。在 Firefox （version 65及更高版本）、基于 Chromium 的浏览器、Safari/iOS 中使用代码移除 <code>iframe</code> 的 <code>src</code> 属性（例如通过 {{domxref("Element.removeAttribute()")}} ）会导致 <code>about:blank</code> 被载入 frame。</dd>
 <dt>{{htmlattrdef("srcdoc")}} {{HTMLVersionInline(5)}} only</dt>
 <dd>该属性是一段HTML代码，这些代码会被渲染到 iframe 中。如果浏览器不支持 <code>srcdoc</code> 属性，则会渲染 <code>src</code> 属性表示的内容。</dd>
 <dt>{{htmlattrdef("width")}}</dt>
 <dd>以CSS像素格式<span style="line-height: inherit;">{{HTMLVersionInline(5)}}</span><span style="line-height: inherit;">，或以像素格式</span><span style="line-height: inherit;">{{HTMLVersionInline(4.01)}}，或以百分比格式指定的 frame 的宽度。默认值是<code>300</code>。</span></dd>
</dl>

<h3 id="不赞成使用的属性"><span style="line-height: inherit;">不赞成使用的属性</span></h3>

<p>下面这些属性已不赞成使用，并且可能不再被所有的浏览器支持。你应避免在新项目里面使用它们，也应尽量从旧项目中移除它们。</p>

<dl>
 <dt>{{htmlattrdef("align")}} {{deprecated_inline("html4.01")}}, {{obsolete_inline("html5")}}</dt>
 <dd>此元素相对于周围元素的对齐方式。</dd>
 <dt>{{htmlattrdef("frameborder")}} {{obsolete_inline("html5")}}</dt>
 <dd>值为<code>1</code>（默认值）时，显示此框架的边框。值为<code>0</code>时移除边框。此属性已不赞成使用，请使用 CSS 属性 {{cssxref("border")}} 代替。</dd>
 <dt>{{htmlattrdef("longdesc")}} {{obsolete_inline("html5")}}</dt>
 <dd>表示框架内容的长描述的 URL。由于广泛的误用，该属性对于无图形界面的浏览器不起作用。</dd>
 <dt>{{htmlattrdef("marginheight")}} {{obsolete_inline("html5")}}</dt>
 <dd>这个属性定义了框架的内容距其上边框与下边框的距离，单位是像素。</dd>
 <dt>{{htmlattrdef("marginwidth")}} {{obsolete_inline("html5")}}</dt>
 <dd>这个属性定义了框架的内容距其左边框和右边框的距离，单位是像素。</dd>
 <dt>{{htmlattrdef("scrolling")}} {{obsolete_inline("html5")}}</dt>
 <dd>这个属性控制是否要在框架内显示滚动条，允许的值包括：
 <ul>
  <li><code>auto</code>: 仅当框架的内容超出框架的范围时显示滚动条。</li>
  <li><code>yes</code>: 始终显示滚动条。</li>
  <li><code>no</code>: 从不显示滚动条。</li>
 </ul>
 </dd>
</dl>

<h3 id="非标准属性_non-standard_inline">非标准属性 {{non-standard_inline}}<span style="display: none;"> </span><span style="display: none;"> </span></h3>

<dl>
 <dt><strong>{{htmlattrdef("mozbrowser")}} {{non-standard_inline}} </strong><span style="display: none;"> </span><span style="display: none;"> </span></dt>
</dl>

<div class="blockIndicator note">
<p>查看 {{bug(1318532)}} 了解如何在 Firefox 的 WebExtensions 中使用此属性。</p>
</div>

<p>这个属性可以让 <code>&lt;iframe&gt;</code> 变得像顶级浏览器窗口，详情请参看 <a href="/zh-CN/docs/Web/API/Using_the_Browser_API">Browser API</a>。这个属性<strong>只能</strong>在 <a href="/zh-CN/docs/Mozilla/Add-ons/WebExtensions">WebExtensions</a> 中使用。</p>

<h2 id="脚本">脚本</h2>

<p>内联的框架，就像 {{HTMLElement("frame")}} 元素一样，会被包含在 {{domxref("window.frames")}} 伪数组（类数组的对象）中。</p>

<p>有了 DOM {{domxref("HTMLIFrameElement")}} 对象，脚本可以通过 {{domxref("HTMLIFrameElement.contentWindow", "contentWindow")}} 访问内联框架的 {{domxref("window")}} 对象。 {{domxref("HTMLIFrameElement.contentDocument", "contentDocument")}} 属性则引用了 <code>&lt;iframe&gt;</code> 内部的 <code>document</code> 元素，(等同于使用contentWindow.document），但IE8-不支持。</p>

<p>在框架内部，脚本可以通过 {{domxref("window.parent")}} 引用父窗口对象。</p>

<p>脚本访问框架内容必须遵守<a href="/zh-CN/docs/Web/Security/Same-origin_policy" title="/en-US/docs/Same_origin_policy_for_JavaScript">同源策略</a>，并且无法访问非同源的 <code>window</code> 对象的几乎所有属性。同源策略同样适用于子窗体访问父窗体的 <code>window</code> 对象。跨域通信可以通过 <a href="/zh-CN/docs/Web/API/Window/postMessage" title="/zh-CN/docs/Web/API/Window/postMessage">window.postMessage</a> 来实现。</p>

<h2 id="定位和缩放">定位和缩放</h2>

<p>作为一个<a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/Replaced_element">可替换元素</a>， 可以使用 {{cssxref("object-position")}} 和 {{cssxref("object-fit")}} 来定位、对齐、缩放 <code>&lt;iframe&gt;</code> 元素内的文档。</p>

<h2 id="示例">示例</h2>

<h3 id="Example1" name="Example1">一个简单的 <code>&lt;iframe&gt;</code></h3>

<p>下面的例子中，我们创建了一个框架。当用户点击框架中的按钮时，浏览器会弹出一个提示框。</p>

<h4 id="HTML">HTML</h4>

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

<h4 id="Result">Result</h4>

<p>{{ EmbedLiveSample('Example1', '', '', '', 'Web/HTML/Element/iframe') }}</p>

<h3 id="Example2" name="Example2">在新标签页中打开 <code>&lt;iframe&gt;</code> 里面的链接</h3>

<p>下面的例子演示了在框架中展示谷歌地图。</p>

<h4 id="HTML_2">HTML</h4>

<pre><code>&lt;base target="_blank"&gt;
&lt;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;amp;source=s_q&amp;amp;hl=es-419&amp;amp;geocode=&amp;amp;q=buenos+aires&amp;amp;sll=37.0625,-95.677068&amp;amp;sspn=38.638819,80.859375&amp;amp;t=h&amp;amp;ie=UTF8&amp;amp;hq=&amp;amp;hnear=Buenos+Aires,+Argentina&amp;amp;z=11&amp;amp;ll=-34.603723,-58.381593&amp;amp;output=embed"&gt;
&lt;/iframe&gt;

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

<h4 id="Result_2">Result</h4>

<p>{{ EmbedLiveSample('Example2', '', '', '', 'Web/HTML/Element/iframe') }}</p>

<h2 id="无障碍环境">无障碍环境</h2>

<p>使用 <code>iframe</code> 的 <a href="/zh-CN/docs/Web/HTML/Global_attributes/title">title</a> 属性来标识框架的主要内容，这样可以极大方便使用辅助技术（例如屏幕阅读器）浏览网页的人。框架的标题应该清楚地描述框架的内容，例如：</p>

<pre class="brush: html line-numbers language-html"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>iframe</span> <span class="attr-name token">title</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>Wikipedia page for Avocados<span class="punctuation token">"</span></span> <span class="attr-name token">src</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>https://en.wikipedia.org/wiki/Avocado<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>iframe</span><span class="punctuation token">&gt;</span></span></code></pre>

<p>如果没有标题，他们就只能浏览每一个框架来获取需要的内容。这非常耗时间，也很容易让人迷惑，尤其是当页面中包含很多框架或者互动内容如音视频等的时候。</p>

<h2 id="Specifications" name="Specifications">规范</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">规范</th>
   <th scope="col">状态</th>
   <th scope="col">说明</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('Referrer Policy', '#referrer-policy-delivery-referrer-attribute', 'referrerpolicy attribute')}}</td>
   <td>{{Spec2('Referrer Policy')}}</td>
   <td>新增属性: <code>referrerpolicy</code></td>
  </tr>
  <tr>
   <td>{{SpecName('HTML WHATWG', 'iframe-embed-object.html#the-iframe-element', '&lt;iframe&gt;')}}</td>
   <td>{{Spec2('HTML WHATWG')}}</td>
   <td></td>
  </tr>
  <tr>
   <td>{{SpecName('HTML5 W3C', 'embedded-content-0.html#the-iframe-element', '&lt;iframe&gt;')}}</td>
   <td>{{Spec2('HTML5 W3C')}}</td>
   <td></td>
  </tr>
  <tr>
   <td>{{SpecName('HTML4.01', 'present/frames.html#h-16.5', '&lt;iframe&gt;')}}</td>
   <td>{{Spec2('HTML4.01')}}</td>
   <td></td>
  </tr>
  <tr>
   <td>{{SpecName('Screen Orientation')}}</td>
   <td>{{Spec2('Screen Orientation')}}</td>
   <td>Adds <code>allow-orientation-lock</code> to the <code>sandbox</code> attribute.</td>
  </tr>
  <tr>
   <td>{{SpecName('Presentation','#sandboxing-and-the-allow-presentation-keyword','allow-presentation')}}</td>
   <td>{{Spec2('Presentation')}}</td>
   <td>Adds <code>allow-presentation</code> to the <code>sandbox</code> attribute</td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_compatibility" name="Browser_compatibility">浏览器兼容性</h2>

<article>
<p>{{Compat("html.elements.iframe", 3)}}</p>
</article>