path: root/files/zh-cn/web/api/htmliframeelement/index.html

---
title: HTMLIFrameElement
slug: Web/API/HTMLIFrameElement
translation_of: Web/API/HTMLIFrameElement
---
<div>{{APIRef("HTML DOM")}}</div>

<p><strong><code>HTMLIFrameElement</code></strong> 接口提供了除 {{domxref("HTMLElement")}} 之外的一些特殊属性和方法（当然也包括了继承自 {{domxref("HTMLElement")}} 的部分）。这些方法用于操作内联frame元素的布局和展示。</p>

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

<p><em>继承了来自父类的属性，{{domxref("HTMLElement")}}。</em></p>

<dl>
 <dt>{{domxref("HTMLIFrameElement.align")}} {{obsolete_inline}}</dt>
 <dd>一个 {{domxref("DOMString")}} 指定了相对于当前上下文的对齐方式。</dd>
 <dt>{{domxref("HTMLIFrameElement.allowfullscreen")}} {{experimental_inline}}</dt>
 <dd>一个 {{domxref("Boolean")}} 标识了该内联frame是否愿意被全屏防止。详情请参考 <a href="/en-US/docs/DOM/Using_full-screen_mode" title="https://developer.mozilla.org/en/DOM/Using_full-screen_mode">Using full-screen mode</a> 。</dd>
 <dt>{{domxref("HTMLIFrameElement.contentDocument")}} {{readonlyInline}}</dt>
 <dd>返回一个 {{domxref("Document")}}，该内联frame嵌套的浏览上下文中活跃的document对象。</dd>
 <dt>{{domxref("HTMLIFrameElement.contentWindow")}} {{readonlyInline}}</dt>
 <dd>返回一个 {{domxref("WindowProxy")}}，该嵌套的浏览上下文中的window代理。</dd>
 <dt>{{domxref("HTMLIFrameElement.frameBorder")}} {{obsolete_inline}}</dt>
 <dd>一个 {{domxref("DOMString")}} 标识了是否在frame之间创建边框。</dd>
 <dt>{{domxref("HTMLIFrameElement.height")}}</dt>
 <dd>一个 {{domxref("DOMString")}} 反映着 {{htmlattrxref("height", "iframe")}} HTML 属性，标识了该frame的高度。</dd>
 <dt>{{domxref("HTMLIFrameElement.longDesc")}} {{obsolete_inline}}</dt>
 <dd>一个 {{domxref("DOMString")}} 包含着该frame的详细描述的URI。</dd>
 <dt>{{domxref("HTMLIFrameElement.marginHeight")}} {{obsolete_inline}}</dt>
 <dd>一个 {{domxref("DOMString")}} ，该frame的外边距高度。</dd>
 <dt>{{domxref("HTMLIFrameElement.marginWidth")}} {{obsolete_inline}}</dt>
 <dd>一个 {{domxref("DOMString")}} ，该frame的外边距宽度。</dd>
 <dt>{{domxref("HTMLIFrameElement.name")}}</dt>
 <dd>一个 {{domxref("DOMString")}} 反映着 {{htmlattrxref("name", "iframe")}} HTML 属性，包含着用来引用该frame的名字。</dd>
 <dt>{{domxref("HTMLIFrameElement.referrerPolicy")}} {{experimental_inline}}</dt>
 <dd>一个 {{domxref("DOMString")}} 反映着 {{htmlattrxref("referrerPolicy", "iframe")}} HTML 属性，标识了获取关联资源时要使用哪个referrer。</dd>
 <dt>{{domxref("HTMLIFrameElement.sandbox")}}</dt>
 <dd>一个 {{domxref("DOMSettableTokenList")}} 反映着 {{htmlattrxref("sandbox", "iframe")}} HTML 属性，指示着对嵌套内容额外的限制。</dd>
 <dt>{{domxref("HTMLIFrameElement.scrolling")}} {{obsolete_inline}}</dt>
 <dd>一个 {{domxref("DOMString")}} 指示着浏览器是否应该为该frame提供滚动条。</dd>
 <dt>{{domxref("HTMLIFrameElement.src")}}</dt>
 <dd>一个 {{domxref("DOMString")}} 反映着 {{htmlattrxref("src", "iframe")}} HTML 属性，包含被嵌入内容的地址。</dd>
 <dt>{{domxref("HTMLIFrameElement.srcdoc")}}</dt>
 <dd>一个 {{domxref("DOMString")}} ，表示该frame中要显示的内容。</dd>
 <dt>{{domxref("HTMLIFrameElement.width")}}</dt>
 <dd>一个 {{domxref("DOMString")}} 反映着 {{htmlattrxref("width", "iframe")}} HTML 属性，标识着该frame的宽度。</dd>
</dl>

<h2 id="方法">方法</h2>

<p><em>继承了来自父类的属性，{{domxref("HTMLElement")}}。</em></p>

<h3 id="浏览器_API_方法">浏览器 API 方法</h3>

<p>为支持浏览器{{HTMLElement("iframe")}}的需求，<code>HTMLIFrameElement</code>已经扩展了一些新的方法来让{{HTMLElement("iframe")}}有更多的能力。他们并未成为规范（参见 {{anch("Browser compatibility")}}）。</p>

<h4 id="导航方法">导航方法</h4>

<p>以下导航方法允许通过{{HTMLElement("iframe")}}的浏览历史进行导航。他们对于后退、前进、停止和重新加载按钮的实现而言是非常必须的。</p>

<dl>
 <dt>{{domxref("HTMLIFrameElement.reload()")}}</dt>
 <dd>重新加载{{HTMLElement("iframe")}}元素内容。</dd>
 <dt>{{domxref("HTMLIFrameElement.stop()")}}</dt>
 <dd>停止加载{{HTMLElement("iframe")}}元素内容。</dd>
 <dt>{{domxref("HTMLIFrameElement.getCanGoBack()")}}</dt>
 <dd>指示是否可以后退。</dd>
 <dt>{{domxref("HTMLIFrameElement.goBack()")}}</dt>
 <dd>改变{{HTMLElement("iframe")}}位置到上一个浏览历史记录的位置。</dd>
 <dt>{{domxref("HTMLIFrameElement.getCanGoForward()")}}</dt>
 <dd>指示是否可以前进。</dd>
 <dt>{{domxref("HTMLIFrameElement.goForward()")}}</dt>
 <dd>改变{{HTMLElement("iframe")}}位置到下一个浏览历史记录的位置。</dd>
</dl>

<h4 id="管理方法">管理方法</h4>

<p>这个方法集管理浏览器{{HTMLElement("iframe")}}所用的资源。它们对于实现分页浏览程序非常有用。</p>

<dl>
 <dt>{{domxref("HTMLIFrameElement.executeScript()")}}</dt>
 <dd>在浏览器{{HTMLElement("iframe")}}页面加载完成后执行指定的脚本。</dd>
 <dt>{{domxref("HTMLIFrameElement.purgeHistory()")}}</dt>
 <dd>清理所有与浏览器{{HTMLElement("iframe")}}有关的资源（不包括cookie）。</dd>
 <dt>{{domxref("HTMLIFrameElement.setVisible()")}}</dt>
 <dd>修改浏览器{{HTMLElement("iframe")}}的可见性。这会影响资源分配和一些函数的资源占用率，如{{domxref("window.requestAnimationFrame","requestAnimationFrame")}}。</dd>
 <dt>{{domxref("HTMLIFrameElement.getVisible()")}}</dt>
 <dd>指示当前浏览器{{HTMLElement("iframe")}}的可见性。</dd>
 <dt>{{domxref("HTMLIFrameElement.setActive()")}}</dt>
 <dd>设置当前{{HTMLElement("iframe")}}为活动frame，对进程管理器如何划分优先级有影响。</dd>
 <dt>{{domxref("HTMLIFrameElement.getActive()")}}</dt>
 <dd>指示当前浏览器{{htmlelement("iframe")}}是否为当前活动的frame。</dd>
 <dt>{{domxref("HTMLIFrameElement.setInputMethodActive()")}}</dt>
 <dd>设置当前浏览器{{HTMLElement("iframe")}}是活动的输入法编辑器窗口而其他不是。当一个顶层应用希望激活一个窗口作为输入法编辑器（如键盘）时有用。</dd>
 <dt>{{domxref("HTMLIFrameElement.setNfcFocus()")}}</dt>
 <dd>Firefox 操作系统 <a href="/en-US/docs/Web/API/NFC_API">NFC API</a> 的一部分，扩展了<a href="/en-US/docs/Web/API/Browser_API">Browser API</a>，这个集合设置浏览器{{htmlelement("iframe")}}是否可以接收一个<a href="/en-US/docs/Web/API/NFC_API">NFC</a>事件。</dd>
</dl>

<h4 id="音频相关方法">音频相关方法</h4>

<p>以下方法允许直接控制浏览器元素的声音。</p>

<dl>
 <dt>{{domxref("HTMLIFrameElement.getVolume()")}}</dt>
 <dd>获取浏览器{{HTMLElement("iframe")}}当前音量。</dd>
 <dt>{{domxref("HTMLIFrameElement.setVolume()")}}</dt>
 <dd>设置浏览器{{HTMLElement("iframe")}}当前音量。</dd>
 <dt>{{domxref("HTMLIFrameElement.mute()")}}</dt>
 <dd>浏览器{{HTMLElement("iframe")}}播放的所有音频静音。</dd>
 <dt>{{domxref("HTMLIFrameElement.unmute()")}}</dt>
 <dd>取消浏览器{{HTMLElement("iframe")}}播放所有音频的静音。</dd>
 <dt>{{domxref("HTMLIFrameElement.getMuted()")}}</dt>
 <dd>指示当前浏览器{{HTMLElement("iframe")}}当前是否被静音。</dd>
</dl>

<h4 id="Search_methods">Search methods</h4>

<p>New methods are provided to allow programmatic searches of browser {{HTMLElement("iframe")}}s to be carried out.</p>

<dl>
 <dt>{{domxref("HTMLIFrameElement.findAll()")}}</dt>
 <dd>Searches for a string in a browser {{HTMLElement("iframe")}}'s content; if found, the first instance of the string relative to the caret position will be highlighted.</dd>
 <dt>{{domxref("HTMLIFrameElement.findNext()")}}</dt>
 <dd>Highlights the next or previous instance of a search result after a {{domxref("HTMLIFrameElement.findAll","findAll()")}} search has been carried out.</dd>
 <dt>{{domxref("HTMLIFrameElement.clearMatch()")}}</dt>
 <dd>Clears any content highlighted by {{domxref("HTMLIFrameElement.findAll","findAll()")}} or {{domxref("HTMLIFrameElement.findNext","findNext()")}}.</dd>
</dl>

<h4 id="Event-related_methods">Event-related methods</h4>

<p>In order to manage the browser {{HTMLElement("iframe")}}'s content, many new events were added (see below). The following methods are used to deal with those events:</p>

<dl>
 <dt>The {{HTMLElement("iframe")}} gains support for the methods of the {{domxref("EventTarget")}} interface</dt>
 <dd>{{domxref("EventTarget.addEventListener","addEventListener()")}}, {{domxref("EventTarget.removeEventListener","removeEventListener()")}}, and {{domxref("EventTarget.dispatchEvent","dispatchEvent()")}}.</dd>
 <dt>{{domxref("HTMLIFrameElement.sendMouseEvent()")}}</dt>
 <dd>Sends a {{domxref("MouseEvent")}} to the {{HTMLElement("iframe")}}'s content.</dd>
 <dt>{{domxref("HTMLIFrameElement.sendTouchEvent()")}}</dt>
 <dd>Sends a {{domxref("TouchEvent")}} to the {{HTMLElement("iframe")}}'s content. Note that this method is available for touch enabled devices only.</dd>
 <dt>{{domxref("HTMLIFrameElement.addNextPaintListener()")}}</dt>
 <dd>Defines a handler to listen for the next {{event("MozAfterPaint")}} event in the browser {{HTMLElement("iframe")}}.</dd>
 <dt>{{domxref("HTMLIFrameElement.removeNextPaintListener()")}}</dt>
 <dd>Removes a handler previously set with {{domxref("HTMLIFrameElement.addNextPaintListener","addNextPaintListener()")}}.</dd>
</dl>

<h4 id="Utility_methods">Utility methods</h4>

<p>Last, there are some utility methods, useful for apps that host a browser {{HTMLElement("iframe")}}.</p>

<dl>
 <dt>{{domxref("HTMLIFrameElement.download()")}}</dt>
 <dd>Downloads a specified URL, storing it at the specified filename/path.</dd>
 <dt>{{domxref("HTMLIFrameElement.getContentDimensions()")}}</dt>
 <dd>Retrieves the X and Y dimensions of the content window.</dd>
 <dt>{{domxref("HTMLIFrameElement.getManifest()")}}</dt>
 <dd>Retrieves the manifest of an app loaded in the browser {{HTMLElement("iframe")}} and returns it as JSON.</dd>
 <dt>{{domxref("HTMLIFrameElement.getScreenshot()")}}</dt>
 <dd>Takes a screenshot of the browser {{HTMLElement("iframe")}}'s content. This is particularly useful to get thumbnails of tabs in a tabbed browser app.</dd>
 <dt>{{domxref("HTMLIFrameElement.getStructuredData()")}}</dt>
 <dd>Retrieves any structured microdata (and hCard and hCalendar microformat data) contained in the HTML loaded in the browser {{HTMLElement("iframe")}} and returns it as JSON.</dd>
 <dt>{{domxref("HTMLIFrameElement.zoom()")}}</dt>
 <dd>Changes the zoom factor of the browser {{HTMLElement("iframe")}}'s content. This is particularly useful for zooming in/out on non-touch-enabled devices.</dd>
</dl>

<dl>
</dl>

<ul>
</ul>

<ul>
</ul>

<h2 id="Specifications">Specifications</h2>

<table class="standard-table">
 <tbody>
  <tr>
   <th scope="col">Specification</th>
   <th scope="col">Status</th>
   <th scope="col">Comment</th>
  </tr>
  <tr>
   <td>{{SpecName('Referrer Policy', '#referrer-policy-delivery-referrer-attribute', 'referrer attribute')}}</td>
   <td>{{Spec2('Referrer Policy')}}</td>
   <td>Added the <code>referrerPolicy</code> property.</td>
  </tr>
  <tr>
   <td>{{SpecName('HTML WHATWG', "the-iframe-element.html#the-iframe-element", "HTMLIFrameElement")}}</td>
   <td>{{Spec2('HTML WHATWG')}}</td>
   <td>The following property has been added: <code>allowFullscreen</code>.</td>
  </tr>
  <tr>
   <td>{{SpecName('HTML5 W3C', "embedded-content-0.html#the-iframe-element", "HTMLIFrameElement")}}</td>
   <td>{{Spec2('HTML5 W3C')}}</td>
   <td>The following properties are now obsolete: <code>scrolling</code>, <code>marginWidth</code>, <code>marginHeight</code>, <code>longDesc</code>, <code>frameBorder</code>, and <code>align</code>.<br>
    The following properties have been added: <code>srcdoc</code>, <code>sandbox</code>, and <code>contentWindow</code>.</td>
  </tr>
  <tr>
   <td>{{SpecName('DOM2 HTML', 'html.html#ID-50708718', 'HTMLIFrameElement')}}</td>
   <td>{{Spec2('DOM2 HTML')}}</td>
   <td>The <code>contentDocument</code> property has been added.</td>
  </tr>
  <tr>
   <td>{{SpecName('DOM1', 'level-one-html.html#ID-50708718', 'HTMLIFrameElement')}}</td>
   <td>{{Spec2('DOM1')}}</td>
   <td>Initial definition.</td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_compatibility">Browser compatibility</h2>

<div>{{CompatibilityTable}}</div>

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Chrome</th>
   <th>Firefox (Gecko)</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari (WebKit)</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatGeckoDesktop(1.0)}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
  </tr>
  <tr>
   <td><code>srcdoc</code></td>
   <td>4</td>
   <td>{{CompatGeckoDesktop(25)}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
  </tr>
  <tr>
   <td><code>sandbox</code></td>
   <td>4</td>
   <td>{{CompatGeckoDesktop(17)}}<sup>[1]</sup></td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
  </tr>
  <tr>
   <td><code>contentDocument</code></td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>8.0<sup>[3]</sup></td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
  </tr>
  <tr>
   <td><code>contentWindow</code></td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
  </tr>
  <tr>
   <td><code>allowFullScreen</code> {{experimental_inline}}</td>
   <td>17 {{property_prefix("-webkit")}}<sup>[4]</sup></td>
   <td>{{CompatGeckoDesktop(9.0)}} {{property_prefix("-moz")}}<br>
    {{CompatGeckoDesktop(18.0)}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
  </tr>
  <tr>
   <td><code>referrerPolicy</code> {{experimental_inline}}</td>
   <td>{{CompatNo}}</td>
   <td>{{compatGeckoDesktop(50)}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
  </tr>
  <tr>
   <td>Browser API methods</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}<sup>[5]</sup></td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
  </tr>
 </tbody>
</table>
</div>

<div id="compat-mobile">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Android</th>
   <th>Firefox Mobile (Gecko)</th>
   <th>Firefox OS (Gecko)</th>
   <th>IE Phone</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatGeckoMobile(1.0)}}</td>
   <td>1.0.1</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
  </tr>
  <tr>
   <td><code>srcdoc</code></td>
   <td>4</td>
   <td>{{CompatGeckoMobile(25)}}</td>
   <td>1.1</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
  </tr>
  <tr>
   <td><code>sandbox</code></td>
   <td>4</td>
   <td>{{CompatGeckoMobile(17)}}<sup>[1]</sup></td>
   <td>1.0.1</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
  </tr>
  <tr>
   <td><code>seamless</code> {{experimental_inline}}</td>
   <td>4</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
  </tr>
  <tr>
   <td><code>contentDocument</code></td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>1.0.1</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
  </tr>
  <tr>
   <td><code>contentWindow</code></td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>1.0.1</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
  </tr>
  <tr>
   <td><code>allowFullScreen</code> {{experimental_inline}}</td>
   <td>17 {{property_prefix("-webkit")}}<sup>[4]</sup></td>
   <td>{{CompatGeckoMobile(9.0)}} {{property_prefix("-moz")}}<br>
    {{CompatGeckoMobile(18.0)}}</td>
   <td>1.0.1</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
  </tr>
  <tr>
   <td><code>referrerPolicy</code> {{experimental_inline}}</td>
   <td>{{CompatNo}}</td>
   <td>{{compatGeckoMobile(50)}}</td>
   <td>2.5</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
  </tr>
  <tr>
   <td>Browser API methods</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>1.0.1<sup>[2]</sup></td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
  </tr>
 </tbody>
</table>
</div>

<ul>
 <li>[1] Previously, the type of <code>sandbox</code> was a {{domxref("DOMString")}} instead of a {{domxref("DOMSettableTokenList")}}. This has been fixed with <a href="/en-US/Firefox/Releases/29/Site_Compatibility">Gecko 29.0</a> {{geckoRelease(29)}}) ({{bug(845067)}}). Other browsers may still implement the property as <code>DOMString</code> since it was a late change in the specification.</li>
 <li>[2] Requires privileged app, and <code>browser</code> and/or <code>embed-apps</code> permissions, depending on what you want to do. See <a href="/en-US/docs/Web/API/Using_the_Browser_API#The_manifest.webapp">Using the Browser API</a> for more details. Most of the proprietary Browser API methods are supported from Firefox OS 1.0.1 onwards; they are marked where this is not the case.</li>
 <li>[3] For older version use <code>HTMLIFrameElement.contentWindow.document</code> instead.</li>
 <li>[4] Daily test builds only.</li>
 <li>[5] Supported in chrome code only.</li>
</ul>

<h2 id="See_also">See also</h2>

<ul>
 <li>The HTML element implementing this interface: {{HTMLElement("iframe")}}</li>
</ul>