--- title: HTMLIFrameElement slug: Web/API/HTMLIFrameElement tags: - API - HTML DOM - Interface - NeedsTranslation - Reference - TopicStub translation_of: Web/API/HTMLIFrameElement ---
{{APIRef("HTML DOM")}}

The HTMLIFrameElement 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.

{{InheritanceDiagram(600,120)}}

Properties

Inherits properties from its parent, {{domxref("HTMLElement")}}.

{{domxref("HTMLIFrameElement.align")}} {{obsolete_inline}}
Is a {{domxref("DOMString")}} that specifies the alignment of the frame with respect to the surrounding context.
{{domxref("HTMLIFrameElement.allowfullscreen")}} {{experimental_inline}}
Is a {{domxref("Boolean")}} indicating whether the inline frame is willing to be placed into full screen mode. See Using full-screen mode for details.
{{domxref("HTMLIFrameElement.allowPaymentRequest")}}
Is a {{domxref("Boolean")}} indicating whether the Payment Request API may be invoked inside a cross-origin iframe.
{{domxref("HTMLIFrameElement.contentDocument")}} {{readonlyInline}}
Returns a {{domxref("Document")}}, the active document in the inline frame's nested browsing context.
{{domxref("HTMLIFrameElement.contentWindow")}} {{readonlyInline}}
Returns a {{domxref("WindowProxy")}}, the window proxy for the nested browsing context.
{{domxref("HTMLIFrameElement.frameBorder")}} {{obsolete_inline}}
Is a {{domxref("DOMString")}} that indicates whether to create borders between frames.
{{domxref("HTMLIFrameElement.height")}}
Is a {{domxref("DOMString")}} that reflects the {{htmlattrxref("height", "iframe")}} HTML attribute, indicating the height of the frame.
{{domxref("HTMLIFrameElement.longDesc")}} {{obsolete_inline}}
Is a {{domxref("DOMString")}} that contains the URI of a long description of the frame.
{{domxref("HTMLIFrameElement.marginHeight")}} {{obsolete_inline}}
Is a {{domxref("DOMString")}} being the height of the frame margin.
{{domxref("HTMLIFrameElement.marginWidth")}} {{obsolete_inline}}
Is a {{domxref("DOMString")}} being the width of the frame margin.
{{domxref("HTMLIFrameElement.name")}}
Is a {{domxref("DOMString")}} that reflects the {{htmlattrxref("name", "iframe")}} HTML attribute, containing a name by which to refer to the frame.
{{domxref("HTMLIFrameElement.referrerPolicy")}} {{experimental_inline}}
Is a {{domxref("DOMString")}} that reflects the {{htmlattrxref("referrerPolicy", "iframe")}} HTML attribute indicating which referrer to use when fetching the linked resource.
{{domxref("HTMLIFrameElement.sandbox")}}
Is a {{domxref("DOMSettableTokenList")}} that reflects the {{htmlattrxref("sandbox", "iframe")}} HTML attribute, indicating extra restrictions on the behavior of the nested content.
{{domxref("HTMLIFrameElement.scrolling")}} {{obsolete_inline}}
Is a {{domxref("DOMString")}} that indicates whether the browser should provide scrollbars for the frame.
{{domxref("HTMLIFrameElement.src")}}
Is a {{domxref("DOMString")}} that reflects the {{htmlattrxref("src", "iframe")}} HTML attribute, containing the address of the content to be embedded.
{{domxref("HTMLIFrameElement.srcdoc")}}
Is a {{domxref("DOMString")}} that represents the content to display in the frame.
{{domxref("HTMLIFrameElement.width")}}
Is a {{domxref("DOMString")}} that reflects the {{htmlattrxref("width", "iframe")}} HTML attribute, indicating the width of the frame.

Methods

Inherits properties from its parent, {{domxref("HTMLElement")}}.

Browser API methods

To support the requirement of a browser {{HTMLElement("iframe")}}, HTMLIFrameElement has been extended with new methods that give the {{HTMLElement("iframe")}} some super powers. These are non-standard (see {{anch("Browser compatibility")}}.)

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.

{{domxref("HTMLIFrameElement.reload()")}}
Allows reloading of the {{HTMLElement("iframe")}} element content.
{{domxref("HTMLIFrameElement.stop()")}}
Allows stopping of the {{HTMLElement("iframe")}}'s content loading.
{{domxref("HTMLIFrameElement.getCanGoBack()")}}
Indicates whether it's possible to navigate backwards.
{{domxref("HTMLIFrameElement.goBack()")}}
Changes the location of the {{HTMLElement("iframe")}} for the previous location in its browsing history.
{{domxref("HTMLIFrameElement.getCanGoForward()")}}
Indicates whether it's possible to navigate forward.
{{domxref("HTMLIFrameElement.goForward()")}}
Changes the location of the {{HTMLElement("iframe")}} for the next location in its browsing history.

Management methods

The next set of methods manage the resources used by a browser {{HTMLElement("iframe")}}. These are especially useful for implementing tabbed browser application.

{{domxref("HTMLIFrameElement.executeScript()")}}
Allows a specified script to be executed against a page loaded in the browser {{HTMLElement("iframe")}}.
{{domxref("HTMLIFrameElement.purgeHistory()")}}
Clears all the resources (cookies, localStorage, cache, etc.) associated with the browser {{HTMLElement("iframe")}}.
{{domxref("HTMLIFrameElement.setVisible()")}}
Changes the visibility state of a browser {{HTMLElement("iframe")}}. This can influence resource allocation and some function usage such as {{domxref("window.requestAnimationFrame","requestAnimationFrame")}}.
{{domxref("HTMLIFrameElement.getVisible()")}}
Indicates the current visibility state of the browser {{HTMLElement("iframe")}}.
{{domxref("HTMLIFrameElement.setActive()")}}
Sets the current {{HTMLElement("iframe")}} as the active frame, which has an effect on how it is prioritized by the process manager.
{{domxref("HTMLIFrameElement.getActive()")}}
Indicates whether the current browser {{htmlelement("iframe")}} is the currently active frame.

The following methods allow direct control of sound in the browser element.

{{domxref("HTMLIFrameElement.getVolume()")}}
Gets the current volume of the browser {{HTMLElement("iframe")}}.
{{domxref("HTMLIFrameElement.setVolume()")}}
Sets the current volume of the browser {{HTMLElement("iframe")}}.
{{domxref("HTMLIFrameElement.mute()")}}
Mutes any audio playing in the browser {{HTMLElement("iframe")}}.
{{domxref("HTMLIFrameElement.unmute()")}}
Unmutes any audio playing in the browser {{HTMLElement("iframe")}}.
{{domxref("HTMLIFrameElement.getMuted()")}}
Indicates whether the browser {{HTMLElement("iframe")}} is currently muted.

Search methods

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

{{domxref("HTMLIFrameElement.findAll()")}}
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.
{{domxref("HTMLIFrameElement.findNext()")}}
Highlights the next or previous instance of a search result after a {{domxref("HTMLIFrameElement.findAll","findAll()")}} search has been carried out.
{{domxref("HTMLIFrameElement.clearMatch()")}}
Clears any content highlighted by {{domxref("HTMLIFrameElement.findAll","findAll()")}} or {{domxref("HTMLIFrameElement.findNext","findNext()")}}.

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:

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

Utility methods

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

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

Specifications

Specification Status Comment
{{SpecName('Payment','#paymentrequest-and-iframe-elements','allowPaymentRequest')}} {{Spec2('Payment')}} Adds allowPaymentRequest property.
{{SpecName('Referrer Policy', '#referrer-policy-delivery-referrer-attribute', 'referrer attribute')}} {{Spec2('Referrer Policy')}} Added the referrerPolicy property.
{{SpecName('HTML WHATWG', "the-iframe-element.html#the-iframe-element", "HTMLIFrameElement")}} {{Spec2('HTML WHATWG')}} The following property has been added: allowFullscreen.
{{SpecName('HTML5 W3C', "embedded-content-0.html#the-iframe-element", "HTMLIFrameElement")}} {{Spec2('HTML5 W3C')}} The following properties are now obsolete: scrolling, marginWidth, marginHeight, longDesc, frameBorder, and align.
The following properties have been added: srcdoc, sandbox, and contentWindow.
{{SpecName('DOM2 HTML', 'html.html#ID-50708718', 'HTMLIFrameElement')}} {{Spec2('DOM2 HTML')}} The contentDocument property has been added.
{{SpecName('DOM1', 'level-one-html.html#ID-50708718', 'HTMLIFrameElement')}} {{Spec2('DOM1')}} Initial definition.

Browser compatibility

{{CompatibilityTable}}
Feature Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support {{CompatVersionUnknown}} {{CompatVersionUnknown}} {{CompatGeckoDesktop(1.0)}} {{CompatVersionUnknown}} {{CompatVersionUnknown}} {{CompatVersionUnknown}}
srcdoc {{CompatChrome(4)}} {{CompatVersionUnknown}} {{CompatGeckoDesktop(25)}} {{CompatNo}} {{CompatUnknown}} {{CompatUnknown}}
sandbox {{CompatChrome(4)}} {{CompatVersionUnknown}} {{CompatGeckoDesktop(17)}}[1] {{CompatUnknown}} {{CompatUnknown}} {{CompatUnknown}}
contentDocument {{CompatVersionUnknown}} {{CompatVersionUnknown}} {{CompatVersionUnknown}} 8.0[3] {{CompatVersionUnknown}} {{CompatVersionUnknown}}
contentWindow {{CompatVersionUnknown}} {{CompatVersionUnknown}} {{CompatUnknown}} {{CompatVersionUnknown}} {{CompatUnknown}} {{CompatUnknown}}
allowFullScreen {{experimental_inline}} {{CompatChrome(17)}} {{property_prefix("-webkit")}}[4] {{CompatVersionUnknown}} {{CompatGeckoDesktop(9.0)}} {{property_prefix("-moz")}}
{{CompatGeckoDesktop(18.0)}}
{{CompatNo}} {{CompatNo}} {{CompatNo}}
referrerPolicy {{experimental_inline}} {{CompatChrome(51)}} {{CompatNo}} {{compatGeckoDesktop(50)}} {{CompatNo}} {{CompatNo}} {{CompatNo}}
Browser API methods {{CompatNo}} {{CompatNo}} {{CompatNo}}[5] {{CompatNo}} {{CompatNo}} {{CompatNo}}
allowPaymentRequest {{CompatNo}} {{CompatUnknown}} {{CompatUnknown}} {{CompatUnknown}} {{CompatNo}} {{CompatUnknown}}
Feature Android Webview Chrome for Android Edge Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support {{CompatVersionUnknown}} {{CompatVersionUnknown}} {{CompatVersionUnknown}} {{CompatGeckoMobile(1.0)}} {{CompatVersionUnknown}} {{CompatVersionUnknown}} {{CompatVersionUnknown}}
srcdoc {{CompatChrome(4)}} {{CompatChrome(4)}} {{CompatVersionUnknown}} {{CompatGeckoMobile(25)}} {{CompatUnknown}} {{CompatUnknown}} {{CompatUnknown}}
sandbox {{CompatChrome(4)}} {{CompatChrome(4)}} {{CompatVersionUnknown}} {{CompatGeckoMobile(17)}}[1] {{CompatUnknown}} {{CompatUnknown}} {{CompatUnknown}}
seamless {{experimental_inline}} {{CompatChrome(4)}} {{CompatChrome(4)}} {{CompatNo}} {{CompatNo}} {{CompatUnknown}} {{CompatUnknown}} {{CompatUnknown}}
contentDocument {{CompatVersionUnknown}} {{CompatVersionUnknown}} {{CompatVersionUnknown}} {{CompatVersionUnknown}} {{CompatUnknown}} {{CompatVersionUnknown}} {{CompatVersionUnknown}}
contentWindow {{CompatVersionUnknown}} {{CompatVersionUnknown}} {{CompatVersionUnknown}} {{CompatUnknown}} {{CompatUnknown}} {{CompatUnknown}} {{CompatUnknown}}
allowFullScreen {{experimental_inline}} {{CompatChrome(17)}} {{property_prefix("-webkit")}}[4] {{CompatChrome(17)}} {{property_prefix("-webkit")}}[4] {{CompatVersionUnknown}} {{CompatGeckoMobile(9.0)}} {{property_prefix("-moz")}}
{{CompatGeckoMobile(18.0)}}
{{CompatNo}} {{CompatNo}} {{CompatNo}}
referrerPolicy {{experimental_inline}} {{CompatChrome(51)}} {{CompatChrome(51)}} {{CompatNo}} {{compatGeckoMobile(50)}} {{CompatNo}} {{CompatNo}} {{CompatNo}}
Browser API methods {{CompatNo}} {{CompatNo}} {{CompatNo}} {{CompatNo}} {{CompatNo}} {{CompatNo}} {{CompatNo}}
allowPaymentRequest {{CompatNo}} {{CompatChrome(57)}} {{CompatUnknown}} {{CompatUnknown}} {{CompatUnknown}} {{CompatNo}} {{CompatUnknown}}

See also