From Web Education Community Group
< HTML‎ | Elements
Jump to: navigation, search


The <iframe> element represents a nested browsing context.


  • 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.
  • In HTML, content of <iframe> is limited to phrasing content, excluding <script> elements and however parsed as text rather than markup, and it is never considered by browsers (it is allowed only for legacy purposes). In XHTML documents, <iframe> cannot have content at all, because in the opinion of spec authors no user agents exist nowadays which display XHTML content and fail to support iframes. Without these unnecessary restrictions, the most reasonable way to include initial content for inline frames would be to exploit the element's content, which could also constitute a fallback for user agents like search engines and data mining tools. For unknown reasons the srcdoc attribute, with its heavy syntax, its confusing serialisation and its scarce readability, has been chosen instead.
  • 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 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=&quot;/gallery?mode=cover&amp;amp;page=1&quot;>in my gallery</a>.">

Note that in srcdoc value, reserved characters from HTML must be treated carefully, which makes this attribute difficult for first-time using authors, as well as for scripts which have to handle it:

  1. when using the same quotes which wrap the srcdoc value, they must be escaped, in order to avoid premature closure of the attribute.
    • This means that it is best wrapping this value in U+0022 " quotation mark rather than U+0027 ' apostrophe, because not all browsers recognize the &apos; entity (which is more familiar than the ' numbered entity).
    • This rule is indeed valid for all attributes, but becomes more significant here due to the fact that in HTML code a more systematic use of quotes is done rather than in prose
  2. Raw ampersand in prose and in URLs must be escaped twice (&amp;amp;), because the value of the attribute is parsed as HTML code, then set as the new srcdoc document source and parsed again in order to be sent to the tokenizer.
  3. Occurrances of (U+003C) < less-than sign should be escaped twice (&amp;lt;) for the same reason and in proper XHTML documents this MUST be done. Although in HTML it is safe to leave them unescaped in prose in some cases, less-than signs must be escaped when they come before a string not containing spaces and followed by an occurrance of (U+003E) > greater-than sign character, in order to prevent them to be parsed as a potentially known tag, and in general in all cases when a string like <any_string can reasonably lead to a confusing result.
  4. When using this attribute in polyglot documents, all occurrances of (U+003C) < less-than sign character constituting srcdoc document elements must be escaped once, because in proper XHTML this character must not be used inside attribute values.
    • However, using srcdoc in XHTML documents is currently discouraged because it is treated incorrectly also in those browsers which currently support it. Although in XHTML a document must have a root element and in this language the concept of tag omission does not exist, as a matter of fact document fragments included as srcdoc value are always completed following the rules for HTML documents instead of being flagged as invalid, and sometimes the HTML serialisation is applied.

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"

HTML Reference

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