HTMLIFrameElement

The HTMLIFrameElement interface provides special properties and methods (beyond those of the HTMLElement interface it also has available to it by inheritance) for manipulating the layout and presentation of inline frame elements.

  <div id="interfaceDiagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveAspectRatio="xMinYMin meet"><a xlink:href="https://developer.mozilla.org/en-US/docs/Web/API/EventTarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#D4DDE4" stroke-width="2px" /><text  x="56" y="30" font-size="12px" font-family="Consolas,Monaco,Andale Mono,monospace" fill="#4D4E53" text-anchor="middle" alignment-baseline="middle">EventTarget</text></a><polyline points="111,25  121,20  121,30  111,25" stroke="#D4DDE4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#D4DDE4"/><a xlink:href="https://developer.mozilla.org/en-US/docs/Web/API/Node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#D4DDE4" stroke-width="2px" /><text  x="188.5" y="30" font-size="12px" font-family="Consolas,Monaco,Andale Mono,monospace" fill="#4D4E53" text-anchor="middle" alignment-baseline="middle">Node</text></a><polyline points="226,25  236,20  236,30  226,25" stroke="#D4DDE4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#D4DDE4"/><a xlink:href="https://developer.mozilla.org/en-US/docs/Web/API/Element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#D4DDE4" stroke-width="2px" /><text  x="303.5" y="30" font-size="12px" font-family="Consolas,Monaco,Andale Mono,monospace" fill="#4D4E53" text-anchor="middle" alignment-baseline="middle">Element</text></a><polyline points="341,25  351,20  351,30  341,25" stroke="#D4DDE4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#D4DDE4"/><a xlink:href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#D4DDE4" stroke-width="2px" /><text  x="436" y="30" font-size="12px" font-family="Consolas,Monaco,Andale Mono,monospace" fill="#4D4E53" text-anchor="middle" alignment-baseline="middle">HTMLElement</text></a><polyline points="491,25  501,20  501,30  491,25" stroke="#D4DDE4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#D4DDE4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#D4DDE4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#D4DDE4"/><a xlink:href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLIFrameElement" target="_top"><rect x="321" y="65" width="170" height="50" fill="#F4F7F8" stroke="#D4DDE4" stroke-width="2px" /><text  x="406" y="94" font-size="12px" font-family="Consolas,Monaco,Andale Mono,monospace" fill="#4D4E53" text-anchor="middle" alignment-baseline="middle">HTMLIFrameElement</text></a></svg></div>

  a:hover text { fill: #0095DD; pointer-events: all;}

Properties

Inherits properties from its parent, HTMLElement.

HTMLIFrameElement.align

Is a DOMString that specifies the alignment of the frame with respect to the surrounding context.

HTMLIFrameElement.allowfullscreen

Is a Boolean indicating whether the inline frame is willing to be placed into full screen mode. See Using full-screen mode for details.

HTMLIFrameElement.allowPaymentRequest

Is a Boolean indicating whether the Payment Request API may be invoked on a cross-origin iframe.

HTMLIFrameElement.contentDocument Read only

Returns a Document, the active document in the inline frame's nested browsing context.

HTMLIFrameElement.contentWindow Read only

Returns a WindowProxy, the window proxy for the nested browsing context.

HTMLIFrameElement.frameBorder

Is a DOMString that indicates whether to create borders between frames.

HTMLIFrameElement.height

Is a DOMString that reflects the height HTML attribute, indicating the height of the frame.

HTMLIFrameElement.longDesc

Is a DOMString that contains the URI of a long description of the frame.

HTMLIFrameElement.marginHeight

Is a DOMString being the height of the frame margin.

HTMLIFrameElement.marginWidth

Is a DOMString being the width of the frame margin.

HTMLIFrameElement.name

Is a DOMString that reflects the name HTML attribute, containing a name by which to refer to the frame.

HTMLIFrameElement.referrerPolicy

Is a DOMString that reflects the referrerpolicy HTML attribute indicating which referrer to use when fetching the linked resource.

HTMLIFrameElement.sandbox

Is a DOMSettableTokenList that reflects the sandbox HTML attribute, indicating extra restrictions on the behavior of the nested content.

HTMLIFrameElement.scrolling

Is a DOMString that indicates whether the browser should provide scrollbars for the frame.

HTMLIFrameElement.src

Is a DOMString that reflects the src HTML attribute, containing the address of the content to be embedded.

HTMLIFrameElement.srcdoc

Is a DOMString that represents the content to display in the frame.

HTMLIFrameElement.width

Is a DOMString that reflects the width HTML attribute, indicating the width of the frame.

Methods

Inherits properties from its parent, HTMLElement.

Browser API methods

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

Navigation methods

The following navigation methods allow navigation through the browsing history of the <iframe>. They are necessary to be able to implement back, forward, stop, and reload buttons.

HTMLIFrameElement.reload()

Allows reloading of the <iframe> element content.

HTMLIFrameElement.stop()

Allows stopping of the <iframe>'s content loading.

HTMLIFrameElement.getCanGoBack()

Indicates whether it's possible to navigate backwards.

HTMLIFrameElement.goBack()

Changes the location of the <iframe> for the previous location in its browsing history.

HTMLIFrameElement.getCanGoForward()

Indicates whether it's possible to navigate forward.

HTMLIFrameElement.goForward()

Changes the location of the <iframe> for the next location in its browsing history.

Management methods

The next set of methods manage the resources used by a browser <iframe>. These are especially useful for implementing tabbed browser application.

HTMLIFrameElement.executeScript()

Allows a specified script to be executed against a page loaded in the browser <iframe>.

HTMLIFrameElement.purgeHistory()

Clears all the resources (cookies, localStorage, cache, etc.) associated with the browser <iframe>.

HTMLIFrameElement.setVisible()

Changes the visibility state of a browser <iframe>. This can influence resource allocation and some function usage such as requestAnimationFrame.

HTMLIFrameElement.getVisible()

Indicates the current visibility state of the browser <iframe>.

HTMLIFrameElement.setActive()

Sets the current <iframe> as the active frame, which has an effect on how it is prioritized by the process manager.

HTMLIFrameElement.getActive()

Indicates whether the current browser <iframe> is the currently active frame.

Audio-related methods

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

HTMLIFrameElement.getVolume()

Gets the current volume of the browser <iframe>.

HTMLIFrameElement.setVolume()

Sets the current volume of the browser <iframe>.

HTMLIFrameElement.mute()

Mutes any audio playing in the browser <iframe>.

HTMLIFrameElement.unmute()

Unmutes any audio playing in the browser <iframe>.

HTMLIFrameElement.getMuted()

Indicates whether the browser <iframe> is currently muted.

Search methods

New methods are provided to allow programmatic searches of browser <iframe>s to be carried out.

HTMLIFrameElement.findAll()

Searches for a string in a browser <iframe>'s content; if found, the first instance of the string relative to the caret position will be highlighted.

HTMLIFrameElement.findNext()

Highlights the next or previous instance of a search result after a findAll() search has been carried out.

HTMLIFrameElement.clearMatch()

Clears any content highlighted by findAll() or findNext().

Event-related methods

In order to manage the browser <iframe>'s content, many new events were added (see below). The following methods are used to deal with those events:

The <iframe> gains support for the methods of the EventTarget interface

addEventListener(), removeEventListener(), and dispatchEvent().

HTMLIFrameElement.sendMouseEvent()

Sends a MouseEvent to the <iframe>'s content.

HTMLIFrameElement.sendTouchEvent()

Sends a TouchEvent to the <iframe>'s content. Note that this method is available for touch enabled devices only.

HTMLIFrameElement.addNextPaintListener()

Defines a handler to listen for the next MozAfterPaint event in the browser <iframe>.

HTMLIFrameElement.removeNextPaintListener()

Removes a handler previously set with addNextPaintListener().

Utility methods

Last, there are some utility methods, useful for apps that host a browser <iframe>.

HTMLIFrameElement.download()

Downloads a specified URL, storing it at the specified filename/path.

HTMLIFrameElement.getContentDimensions()

Retrieves the X and Y dimensions of the content window.

HTMLIFrameElement.getManifest()

Retrieves the manifest of an app loaded in the browser <iframe> and returns it as JSON.

HTMLIFrameElement.getScreenshot()

Takes a screenshot of the browser <iframe>'s content. This is particularly useful to get thumbnails of tabs in a tabbed browser app.

HTMLIFrameElement.getStructuredData()

Retrieves any structured microdata (and hCard and hCalendar microformat data) contained in the HTML loaded in the browser <iframe> and returns it as JSON.

HTMLIFrameElement.zoom()

Changes the zoom factor of the browser <iframe>'s content. This is particularly useful for zooming in/out on non-touch-enabled devices.

Specifications

Browser compatibility

• [1] Previously, the type of sandbox was a DOMString instead of a DOMSettableTokenList. This has been fixed with Gecko 29.0 (Firefox 29 / Thunderbird 29 / SeaMonkey 2.26)) (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: <iframe>