1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
|
---
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")}}有更多的能力。他们并未成为规范（参见 <a href="#browser_compatibility">Browser compatibility</a>）。</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>
{{Compat("api.HTMLIFrameElement")}}
<h2 id="See_also">See also</h2>
<ul>
<li>The HTML element implementing this interface: {{HTMLElement("iframe")}}</li>
</ul>
|
