<iframe>

The <iframe> element represents a nested browsing context.

Point

• If the src attribute and the srcdoc attribute are both specified together, the srcdoc attribute takes priority. This allows authors to provide a fallback URL for legacy user agents that do not support the srcdoc attribute.

HTML Attributes

• src = URL potentially surrounded by spaces
  Gives the address of a page that the nested browsing context is to contain.

• srcdoc = HTML contents
  Gives the content of the page that the nested browsing context is to contain.

• name = browsing-context name
  Represents the browsing-context name. When the browsing context is created, if the attribute is present, the browsing context name must be set to the value of this attribute; otherwise, the browsing context name must be set to the empty string.

• sandbox = allow-same-origin/ allow-top-navigation/ allow-forms/ allow-scripts
  Enables a set of extra restrictions on any content hosted by the iframe.
  • If presents, given in the following list set.
    • prevents content from navigating browsing contexts other than the sandboxed browsing context itself.
    • prevents content from navigating their top-level browsing context.
    • prevents content from instantiating plugins, whether using the embed element, the object element, the applet element, or through navigation of a nested browsing context.
    • prevents content from using the seamless attribute on descendant iframe elements.
    • forces content into a unique origin, thus preventing it from accessing other content from the same origin.
    • blocks form submission, blocks script execution.
    • blocks features that trigger automatically, such as automatically playing a video or automatically focusing a form control.
  • allow-same-origin
    allows the content to be treated as being from the same origin instead of forcing it into a unique origin.
  • allow-top-navigation
    allows the content to navigate its top-level browsing context
  • allow-forms and allow-scripts
    re-enable forms and scripts respectively (though scripts are still prevented from creating popups).

• seamless = boolean
  Indicates that the iframe element's browsing context is to be rendered in a manner that makes it appear to be part of the containing document (seamlessly included in the parent document).

• width = non-negative integer
  Give the width of the visual content of the element, in CSS pixels.

• height = non-negative integer
  Give the height of the visual content of the element, in CSS pixels.

See also global attributes.

Example

Example A

the srcdoc attribute in conjunction with the sandbox and seamless attributes [try it]:

<iframe seamless sandbox="allow-same-origin"
        srcdoc="<p>Yeah, you can see it <a href="/gallery?mode=cover&amp;page=1">in my gallery</a>.">
</iframe>

Example B

In this example, a gadget from another site is embedded. The gadget has scripting and forms enabled, and the origin sandbox restrictions are lifted, allowing the gadget to communicate with its originating server. The sandbox is still useful, however, as it disables plugins and popups, thus reducing the risk of the user being exposed to malware and other annoyances [try it]:

<iframe sandbox="allow-same-origin allow-forms allow-scripts"
        src="http://maps.example.com/embedded.html"></iframe>

HTML Reference

The HTML5 specification defines the <iframe> element in 4.8.2 The iframe element.