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
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
|
---
title: HTMLIFrameElement
slug: Web/API/HTMLIFrameElement
tags:
- API
translation_of: Web/API/HTMLIFrameElement
---
<div>
<div>{{APIRef("HTML DOM")}}</div>
</div>
<p>The <strong><code>HTMLIFrameElement</code></strong> interface provides special properties and methods (beyond those of the {{domxref("HTMLElement")}} interface it also has available to it by inheritance) for manipulating the layout and presentation of inline frame elements.</p>
<h2 id="Properties">Properties</h2>
<p><em>Inherits properties from its parent, {{domxref("HTMLElement")}}</em>.</p>
<dl>
<dt>{{domxref("HTMLIFrameElement.align")}} {{obsolete_inline}}</dt>
<dd>Is a {{domxref("DOMString")}} that specifies the alignment of the frame with respect to the surrounding context.</dd>
<dt>{{domxref("HTMLIFrameElement.allowfullscreen")}} {{experimental_inline}}</dt>
<dd>Is a {{domxref("Boolean")}} that indicates whether or not the inline frame is willing to be placed into full screen mode. See <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> for details.</dd>
<dt>{{domxref("HTMLIFrameElement.contentDocument")}} {{readonlyInline}}</dt>
<dd>Returns a {{domxref("Document")}}, the active document in the inline frame's nested browsing context.</dd>
<dt>{{domxref("HTMLIFrameElement.contentWindow")}} {{readonlyInline}}</dt>
<dd>Returns a {{domxref("WindowProxy")}}, the window proxy for the nested browsing context.</dd>
<dt>{{domxref("HTMLIFrameElement.frameborder")}} {{obsolete_inline}}</dt>
<dd>Is a {{domxref("DOMString")}} that indicates whether to create borders between frames.</dd>
<dt>{{domxref("HTMLIFrameElement.height")}}</dt>
<dd>Is a {{domxref("DOMString")}} that reflects the {{htmlattrxref("height", "iframe")}} HTML attribute, indicating the height of the frame.</dd>
<dt>{{domxref("HTMLIFrameElement.longDesc")}} {{obsolete_inline}}</dt>
<dd>Is a {{domxref("DOMString")}} that contains the URI of a long description of the frame.</dd>
<dt>{{domxref("HTMLIFrameElement.marginHeight")}} {{obsolete_inline}}</dt>
<dd>Is a {{domxref("DOMString")}} being the height of the frame margin.</dd>
<dt>{{domxref("HTMLIFrameElement.marginWidth")}} {{obsolete_inline}}</dt>
<dd>Is a {{domxref("DOMString")}} being the width of the frame margin.</dd>
<dt>{{domxref("HTMLIFrameElement.name")}}</dt>
<dd>Is a {{domxref("DOMString")}} that reflects the {{htmlattrxref("name", "iframe")}} HTML attribute, containing a name by which to refer to the frame.</dd>
<dt>{{domxref("HTMLIFrameElement.sandbox")}}</dt>
<dd>Is a {{domxref("DOMSettableTokenList")}} that reflects the {{htmlattrxref("sandbox", "iframe")}} HTML attribute, indicating extra restrictions on the behavior of the nested content.</dd>
<dt>{{domxref("HTMLIFrameElement.scrolling")}} {{obsolete_inline}}</dt>
<dd>Is a {{domxref("DOMString")}} that indicates whether the browser should provide scrollbars for the frame.</dd>
<dt>{{domxref("HTMLIFrameElement.seamless")}} {{experimental_inline}}</dt>
<dd>Is a {{domxref("Boolean")}} that reflects the {{htmlattrxref("seamless", "iframe")}} HTML attribute, indicating that the inline frame should be rendered seamlessly within the parent document.</dd>
<dt>{{domxref("HTMLIFrameElement.src")}}</dt>
<dd>Is a {{domxref("DOMString")}} that reflects the {{htmlattrxref("src", "iframe")}} HTML attribute, containing the address of the content to be embedded.</dd>
<dt>{{domxref("HTMLIFrameElement.srcdoc")}}</dt>
<dd>Is a {{domxref("DOMString")}} that represents the content to display in the frame.</dd>
<dt>{{domxref("HTMLIFrameElement.width")}}</dt>
<dd>Is a {{domxref("DOMString")}} that reflects the {{htmlattrxref("width", "iframe")}} HTML attribute, indicating the width of the frame.</dd>
</dl>
<h2 id="Methods">Methods</h2>
<p><em>No specific method; inherits properties from its parent, {{domxref("HTMLElement")}}</em>.</p>
<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('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>, <code>seamless</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)}} [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>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
</tr>
<tr>
<td><code>contentDocument</code></td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>8.0 (for older version use <code>HTMLIFrameElement.contentWindow.document</code> instead)</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")}}<br>
<em>Daily test builds only</em></td>
<td>{{compatGeckoDesktop(9.0)}} {{property_prefix("-moz")}}<br>
{{compatGeckoDesktop(18.0)}}</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>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>{{CompatVersionUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
</tr>
<tr>
<td><code>srcdoc</code></td>
<td>4</td>
<td>{{CompatGeckoMobile(25)}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
</tr>
<tr>
<td><code>sandbox</code></td>
<td>4</td>
<td>{{CompatGeckoMobile(17)}} [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>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
</tr>
<tr>
<td><code>contentDocument</code></td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
</tr>
<tr>
<td><code>contentWindow</code></td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
</tr>
<tr>
<td><code>allowFullScreen</code> {{experimental_inline}}</td>
<td>17 {{property_prefix("-webkit")}}<br>
<em>Daily test builds only</em></td>
<td>{{compatGeckoMobile(9.0)}} {{property_prefix("-moz")}}<br>
{{compatGeckoMobile(18.0)}}</td>
<td>{{CompatNo}}</td>
<td>{{CompatNo}}</td>
<td>{{CompatNo}}</td>
</tr>
</tbody>
</table>
</div>
<p>[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.</p>
<h3 id="Firefox_OS_notes">Firefox OS notes</h3>
<p>Firefox OS extend the <code>HTMLIFrameElement</code> interface to support browser iframes. Those extra methods are made for <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Firefox_OS/Security/Application_security" title="https://developer.mozilla.org/en-US/docs/Mozilla/Firefox_OS/Security/Application_security">privileged applications</a> which want to implement a browser like application for Firefox OS devices. Not that in that context, the <code>HTMLIFrameElement</code> also inherit methods from the {{domxref("EventTarget")}} interface. To learn how to implement such applications, see the <a href="/en-US/docs/WebAPI/Browser" title="/en-US/docs/WebAPI/Browser">Using the Browser API</a> article.</p>
<dl>
<dt>{{domxref("HTMLIFrameElement.setVisible()","HTMLIFrameElement.setVisible(visible)")}}</dt>
<dd>Allows the parent to explicitly change the visibility state of the browser iframes.</dd>
<dt>{{domxref("HTMLIFrameElement.getVisible()","HTMLIFrameElement.getVisible()")}}</dt>
<dd>Returns the current visibility state of the browser iframe. Returns a {{domxref("DOMRequest")}}.</dd>
<dt>{{domxref("HTMLIFrameElement.sendMouseEvent()","HTMLIFrameElement.sendMouseEvent(type, x, y, button, clickCount, modifiers)")}}</dt>
<dd>Send a mouse event to the browser iframe.</dd>
<dt>{{domxref("HTMLIFrameElement.sendTouchEvent()","HTMLIFrameElement.sendTouchEvent(type, identifiers, touchesX, touchesY,radiisX, radiisY, rotationAngles, forces,count, modifiers)")}}</dt>
<dd>Send a touch event to the browser iframe.</dd>
<dt>{{domxref("HTMLIFrameElement.goBack()","HTMLIFrameElement.goBack()")}}</dt>
<dd>Navigate the browser iframe back.</dd>
<dt>{{domxref("HTMLIFrameElement.goForward()","HTMLIFrameElement.goForward()")}}</dt>
<dd>Navigate the browser iframe forward.</dd>
<dt>{{domxref("HTMLIFrameElement.reload()","HTMLIFrameElement.reload()")}}</dt>
<dd>Reload the browser iframe.</dd>
<dt>{{domxref("HTMLIFrameElement.stop()","HTMLIFrameElement.stop()")}}</dt>
<dd>Stop loading the browser iframe content.</dd>
<dt>{{domxref("HTMLIFrameElement.purgeHistory()","HTMLIFrameElement.purgeHistory()")}}</dt>
<dd>Allows to remove the all browsing history of the browser iframe.</dd>
<dt>{{domxref("HTMLIFrameElement.getScreenshot()","HTMLIFrameElement.getScreenshot(maxWidth, maxHeight)")}}</dt>
<dd>Allows to take a screenshot of the browser iframe's content, scaled to fit within <code>maxWidth</code> and <code>maxHeight</code> pixels. Returns a {{domxref("DOMRequest")}}.</dd>
<dt>{{domxref("HTMLIFrameElement.addNextPaintListener()","HTMLIFrameElement.addNextPaintListener()")}}</dt>
<dd>Add a listener to recieve an event the first time the browser iframe is ready to paint (This listener is sent an event after the first {{event("MozAfterPaint")}} event is dispacted in the iframe.)</dd>
<dt>{{domxref("HTMLIFrameElement.removeNextPaintListener()","HTMLIFrameElement.removeNextPaintListener()")}}</dt>
<dd>Remove the listener added by the previous function.</dd>
<dt>{{domxref("HTMLIFrameElement.getCanGoBack()","HTMLIFrameElement.getCanGoBack()")}}</dt>
<dd>Returns a {{domxref("DOMRequest")}} which <code>result</code> is a boolean indicating wether the browser iframe can be navigate backward.</dd>
<dt>{{domxref("HTMLIFrameElement.getCanGoForward()","HTMLIFrameElement.getCanGoForward()")}}</dt>
<dd>Returns a {{domxref("DOMRequest")}} which <code>result</code> is a boolean indicating wether the browser iframe can be navigate forward.</dd>
</dl>
<h2 id="See_also">See also</h2>
<ul>
<li>The HTML element implementing this interface: {{HTMLElement("iframe")}}</li>
</ul>
|
