diff options
Diffstat (limited to 'files/it/web/api/htmliframeelement/index.html')
| -rw-r--r-- | files/it/web/api/htmliframeelement/index.html | 455 |
1 files changed, 455 insertions, 0 deletions
diff --git a/files/it/web/api/htmliframeelement/index.html b/files/it/web/api/htmliframeelement/index.html new file mode 100644 index 0000000000..4138970a78 --- /dev/null +++ b/files/it/web/api/htmliframeelement/index.html @@ -0,0 +1,455 @@ +--- +title: HTMLIFrameElement +slug: Web/API/HTMLIFrameElement +tags: + - API + - HTML DOM + - Interface + - NeedsTranslation + - Reference + - TopicStub +translation_of: Web/API/HTMLIFrameElement +--- +<div>{{APIRef("HTML DOM")}}</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> + +<p>{{InheritanceDiagram(600,120)}}</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")}} indicating whether 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.allowPaymentRequest")}}</dt> + <dd>Is a {{domxref("Boolean")}} indicating whether the <a href="/en-US/docs/Web/API/Payment_Request_API">Payment Request API</a> may be invoked inside a cross-origin iframe.</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.referrerPolicy")}} {{experimental_inline}}</dt> + <dd>Is a {{domxref("DOMString")}} that reflects the {{htmlattrxref("referrerPolicy", "iframe")}} HTML attribute indicating which referrer to use when fetching the linked resource.</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.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>Inherits properties from its parent, {{domxref("HTMLElement")}}</em>.</p> + +<h3 id="Browser_API_methods">Browser API methods</h3> + +<p>To support the requirement of a browser {{HTMLElement("iframe")}}, <code>HTMLIFrameElement</code> has been extended with new methods that give the {{HTMLElement("iframe")}} some super powers. These are non-standard (see {{anch("Browser compatibility")}}.)</p> + +<h4 id="Navigation_methods">Navigation methods</h4> + +<p>The following navigation methods allow navigation through the browsing history of the {{HTMLElement("iframe")}}. They are necessary to be able to implement back, forward, stop, and reload buttons.</p> + +<dl> + <dt>{{domxref("HTMLIFrameElement.reload()")}}</dt> + <dd>Allows reloading of the {{HTMLElement("iframe")}} element content.</dd> + <dt>{{domxref("HTMLIFrameElement.stop()")}}</dt> + <dd>Allows stopping of the {{HTMLElement("iframe")}}'s content loading.</dd> + <dt>{{domxref("HTMLIFrameElement.getCanGoBack()")}}</dt> + <dd>Indicates whether it's possible to navigate backwards.</dd> + <dt>{{domxref("HTMLIFrameElement.goBack()")}}</dt> + <dd>Changes the location of the {{HTMLElement("iframe")}} for the previous location in its browsing history.</dd> + <dt>{{domxref("HTMLIFrameElement.getCanGoForward()")}}</dt> + <dd>Indicates whether it's possible to navigate forward.</dd> + <dt>{{domxref("HTMLIFrameElement.goForward()")}}</dt> + <dd>Changes the location of the {{HTMLElement("iframe")}} for the next location in its browsing history.</dd> +</dl> + +<h4 id="Management_methods">Management methods</h4> + +<p>The next set of methods manage the resources used by a browser {{HTMLElement("iframe")}}. These are especially useful for implementing tabbed browser application.</p> + +<dl> + <dt>{{domxref("HTMLIFrameElement.executeScript()")}}</dt> + <dd>Allows a specified script to be executed against a page loaded in the browser {{HTMLElement("iframe")}}.</dd> + <dt>{{domxref("HTMLIFrameElement.purgeHistory()")}}</dt> + <dd>Clears all the resources (cookies, localStorage, cache, etc.) associated with the browser {{HTMLElement("iframe")}}.</dd> + <dt>{{domxref("HTMLIFrameElement.setVisible()")}}</dt> + <dd>Changes the visibility state of a browser {{HTMLElement("iframe")}}. This can influence resource allocation and some function usage such as {{domxref("window.requestAnimationFrame","requestAnimationFrame")}}.</dd> + <dt>{{domxref("HTMLIFrameElement.getVisible()")}}</dt> + <dd>Indicates the current visibility state of the browser {{HTMLElement("iframe")}}.</dd> + <dt>{{domxref("HTMLIFrameElement.setActive()")}}</dt> + <dd>Sets the current {{HTMLElement("iframe")}} as the active frame, which has an effect on how it is prioritized by the process manager.</dd> + <dt>{{domxref("HTMLIFrameElement.getActive()")}}</dt> + <dd>Indicates whether the current browser {{htmlelement("iframe")}} is the currently active frame.</dd> +</dl> + +<h4 id="Audio-related_methods">Audio-related methods</h4> + +<p>The following methods allow direct control of sound in the browser element.</p> + +<dl> + <dt>{{domxref("HTMLIFrameElement.getVolume()")}}</dt> + <dd>Gets the current volume of the browser {{HTMLElement("iframe")}}.</dd> + <dt>{{domxref("HTMLIFrameElement.setVolume()")}}</dt> + <dd>Sets the current volume of the browser {{HTMLElement("iframe")}}.</dd> + <dt>{{domxref("HTMLIFrameElement.mute()")}}</dt> + <dd>Mutes any audio playing in the browser {{HTMLElement("iframe")}}.</dd> + <dt>{{domxref("HTMLIFrameElement.unmute()")}}</dt> + <dd>Unmutes any audio playing in the browser {{HTMLElement("iframe")}}.</dd> + <dt>{{domxref("HTMLIFrameElement.getMuted()")}}</dt> + <dd>Indicates whether the browser {{HTMLElement("iframe")}} is currently muted.</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('Payment','#paymentrequest-and-iframe-elements','allowPaymentRequest')}}</td> + <td>{{Spec2('Payment')}}</td> + <td>Adds <code>allowPaymentRequest</code> property.</td> + </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>Edge</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>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop(1.0)}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>srcdoc</code></td> + <td>{{CompatChrome(4)}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop(25)}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>sandbox</code></td> + <td>{{CompatChrome(4)}}</td> + <td>{{CompatVersionUnknown}}</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>{{CompatVersionUnknown}}</td> + <td>8.0<sup>[3]</sup></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>contentWindow</code></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>allowFullScreen</code> {{experimental_inline}}</td> + <td>{{CompatChrome(17)}} {{property_prefix("-webkit")}}<sup>[4]</sup></td> + <td>{{CompatVersionUnknown}}</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>{{CompatChrome(51)}}</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}}</td> + <td>{{CompatNo}}<sup>[5]</sup></td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td><code>allowPaymentRequest</code></td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android Webview</th> + <th>Chrome for Android</th> + <th>Edge</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>{{CompatVersionUnknown}}</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>{{CompatChrome(4)}}</td> + <td>{{CompatChrome(4)}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile(25)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>sandbox</code></td> + <td>{{CompatChrome(4)}}</td> + <td>{{CompatChrome(4)}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile(17)}}<sup>[1]</sup></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>seamless</code> {{experimental_inline}}</td> + <td>{{CompatChrome(4)}}</td> + <td>{{CompatChrome(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>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>contentWindow</code></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>allowFullScreen</code> {{experimental_inline}}</td> + <td>{{CompatChrome(17)}} {{property_prefix("-webkit")}}<sup>[4]</sup></td> + <td>{{CompatChrome(17)}} {{property_prefix("-webkit")}}<sup>[4]</sup></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile(9.0)}} {{property_prefix("-moz")}}<br> + {{CompatGeckoMobile(18.0)}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td><code>referrerPolicy</code> {{experimental_inline}}</td> + <td>{{CompatChrome(51)}}</td> + <td>{{CompatChrome(51)}}</td> + <td>{{CompatNo}}</td> + <td>{{compatGeckoMobile(50)}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td>Browser API methods</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td><code>allowPaymentRequest</code></td> + <td>{{CompatNo}}</td> + <td>{{CompatChrome(57)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</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>[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> |