---
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")}}.)
Navigation methods
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}} |
- [1] Previously, the type of
sandbox
was a {{domxref("DOMString")}} instead of a {{domxref("DOMSettableTokenList")}}. This has been fixed with Gecko 29.0 {{geckoRelease(29)}}) ({{bug(845067)}}). Other browsers may still implement the property as DOMString
since it was a late change in the specification.
- [3] For older version use
HTMLIFrameElement.contentWindow.document
instead.
- [4] Daily test builds only.
- [5] Supported in chrome code only.
See also
- The HTML element implementing this interface: {{HTMLElement("iframe")}}