Quackit Logo
HTML
CSS
Scripting
Database
Hosting
Design
XML

HTML 5 <iframe> Tag

The HTML <iframe> tag is used to specify an inline frame.

An inline frame allows you to embed another document within the current HTML document. The HTML 5 specification refers to this as a "nested browsing context".

Usage

Inline frames are often used in online advertising, where the contents of the <iframe> is an ad from an external party.

To create an inline frame, you need a second HTML document. This second document contains the content within the inline frame. You use the iframe src attribute to specify the source of the other document, as well as other attributes to determine the height, width etc.

Note that in previous versions of HTML, you could create "fallback content" by placing content within the opening and closing <iframe> </iframe> tags. In HTML 5 however, the code><iframe> element never has fallback content.

The 'seamless' Attribute

HTML 5 doesn't support attributes such as frameborder, scrolling, marginwidth, and marginheight (which were supported in HTML 4.01). Instead, the HTML 5 specification has introduced the seamless attribute. The seamless attribute allows the inline frame to appear as though it is being rendered as part of the containing document. For example, borders and scrollbars will not appear.

Example

Here is an example of the HTML code used to create an inline frame (or a "nested browsing context"). Note that this example uses the seamless attribute, which is new in HTML 5. If you see scrollbars and a border around the inline frame, it's because your browser doesn't support the seamless attribute.

Source CodeResult

Attributes

HTML tags can contain one or more attributes. Attributes are added to a tag to provide the browser with more information about how the tag should appear or behave. Attributes consist of a name and a value separated by an equals (=) sign, with the value surrounded by double quotes. Here's an example, style="color:black;".

There are 3 kinds of attributes that you can add to your HTML tags: Element-specific, global, and event handler content attributes.

The attributes that you can add to this tag are listed below.

Element-Specific Attributes

The following table shows the attributes that are specific to this tag/element.

AttributeDescription
srcLocation of the frame contents (for example, the HTML page to be loaded into the frame).
srcdocContent of the page that the inline frame is to contain. This (optional) attribute was introduced to allow embedding of potentially hostile content inline. It is expected to be used together with the sandbox and seamless attributes.

If the browser doesn't support the srcdoc attribute, it will use the URL provided by the src attribute instead, if supplied and valid, otherwise the <iframe> will remain blank.

nameAssigns a name to a frame. This is useful for loading contents into one frame from another.
sandboxEnables a set of extra restrictions on any content hosted by the <iframe>.

Possible values:

AttributeDescription
allow-top-navigationPrevents content from navigating their top-level browsing context.
allow-same-originForces content into a unique origin, thus preventing it from accessing other content from the same origin. also prevents script from reading from or writing to the document.cookie IDL attribute, and blocks access to localStorage and openDatabase(). [WEBSTORAGE] [WEBSQL].
allow-formsBlocks form submission.
allow-scriptsBlocks script execution.
allow-pointer-lockEnables Pointer lock.

Pointer lock provides input methods based on the movement of the mouse over time, not just the absolute position of the mouse cursor. Pointer lock is useful for applications that require significant mouse input to control movements, rotate objects, and change entries. It is particularly essential for highly visual applications, such as those that use first-person perspective, as well as 3D views and modeling. By default, sandboxed iframes block Pointer lock. This attribute allows you to enable Pointer lock on sandboxed iframes.

seamlessAllows the inline frame to appear as though it is being rendered as part of the containing document. For example, borders and scrollbars will not appear.

This is a boolean attribute. If the attribute is present, its value must either be the empty string or a value that is an ASCII case-insensitive match for the attribute's canonical name, with no leading or trailing whitespace (i.e. either seamless or seamless="seamless").

Possible values:

  • [Empty string]
  • seamless
allowfullscreenSpecifies that Document objects in the <iframe> element's browsing context are to be allowed to use requestFullscreen() (if it's not blocked for other reasons, e.g. there is another ancestor <iframe> without this attribute set).
widthSpecifies the width of the inline frame.
heightSpecifies the height of the inline frame.

Global Attributes

The following attributes are standard across all HTML 5 tags.

  • accesskey
  • class
  • contenteditable
  • contextmenu
  • dir
  • draggable
  • dropzone
  • hidden
  • id
  • inert
  • itemid
  • itemprop
  • itemref
  • itemscope
  • itemtype
  • lang
  • spellcheck
  • style
  • tabindex
  • title
  • translate

For a full explanation of these attributes, see HTML 5 global attributes.

Event Handler Content Attributes

Event handler content attributes enable you to invoke a script from within your HTML. The script is invoked when a certain "event" occurs. Each event handler content attribute deals with a different event.

Here are the standard HTML 5 event handler content attributes.

  • onabort
  • oncancel
  • onblur
  • oncanplay
  • oncanplaythrough
  • onchange
  • onclick
  • oncontextmenu
  • ondblclick
  • ondrag
  • ondragend
  • ondragenter
  • ondragexit
  • ondragleave
  • ondragover
  • ondragstart
  • ondrop
  • ondurationchange
  • onemptied
  • onended
  • onerror
  • onfocus
  • onformchange
  • onforminput
  • oninput
  • oninvalid
  • onkeydown
  • onkeypress
  • onkeyup
  • onload
  • onloadeddata
  • onloadedmetadata
  • onloadstart
  • onmousedown
  • onmousemove
  • onmouseout
  • onmouseover
  • onmouseup
  • onmousewheel
  • onpause
  • onplay
  • onplaying
  • onprogress
  • onratechange
  • onreadystatechange
  • onscroll
  • onseeked
  • onseeking
  • onselect
  • onshow
  • onstalled
  • onsubmit
  • onsuspend
  • ontimeupdate
  • onvolumechange
  • onwaiting

For a full explanation of these attributes, see HTML 5 event handler content attributes.

Also see the HTML 4.01 tags


Enjoy this page?

  1. Link to this page (copy/paste into your own website or blog):
  2. Link to Quackit using one of these banner ads.

Thanks for supporting Quackit!

Sponsored Link: Design CODE-FREE Websites