HTML <iframe> Tag
The HTML <iframe> tag represents a nested browsing context in an HTML document.
The <iframe> tag allows you to embed another document within the current HTML document. It also allows you to provide a nested browsing context without using another document - by simply passing the content to the <iframe> via the srcdoc attribute.
Prior to HTML5, the <iframe> tag was said to create an inline frame. The HTML5 specification does not use the term inline frame, but uses nested browsing context instead.
Syntax
The <iframe> tag is written as <iframe></iframe> with the applicable attributes inserted into the start tag.
Like this:
Or using the srcdoc attribute:
Using the src, width, height, and seamless attributes:
Examples
Basic tag usage
The following example uses the src attribute to specify an external document that the nested browsing context is to contain. In this example, we don't use the width or height attribute.
The width and height Attributes
Here, we add the width and height attributes to the previous example.
The seamless Attribute
The WHATWG HTML Living Standard and HTML 5.1 introduced the seamless attribute. The seamless attribute specifies that the 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). This results in the document's styles being applied to the nested content. It also results in any links being opened in the <iframe> element's parent browsing context.
Note that at the time of writing, browser support for the seamless attribute is poor.
The srcdoc Attribute
You can use the srcdoc attribute to specify the content that should appear in the nested browsing context.
Note that <!doctype> and <title> are optional when using the srcdoc attribute within a <iframe> tag (they are required on most other HTML documents).
Attributes
Attributes can be added to an HTML element to provide more information about how the element should appear or behave.
There are 3 kinds of attributes that you can add to your HTML tags: Element-specific, global, and event handler content attributes.
The <iframe> element accepts the following attributes.
Element-Specific Attributes
This table shows the attributes that are specific to the <iframe> tag/element.
| Attribute | Description | ||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| src | Location of the frame contents (for example, the HTML page to be loaded into the frame). | ||||||||||||||||
| srcdoc | Content 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 |
||||||||||||||||
| name | Assigns a name to a frame. This is useful for loading contents into one frame from another. | ||||||||||||||||
| sandbox | Enables a set of extra restrictions on any content hosted by the <iframe>. The value of the sandbox attribute can be either the empty string (all the restrictions are applied), or a space-separated list of tokens that remove each respective restriction.
Possible values:
|
||||||||||||||||
| seamless | 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.
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 Possible values:
Note that this attribute is only supported by the WHATWG HTML Living Standard. It is not supported by the W3C HTML5 specification.
|
||||||||||||||||
| allowfullscreen | Specifies 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).
Note that this attribute is only supported by the WHATWG HTML Living Standard. It is not supported by the W3C HTML5 specification.
|
||||||||||||||||
| width | Specifies the width of the inline frame. | ||||||||||||||||
| height | Specifies the height of the inline frame. |
Global Attributes
The following attributes are standard across all HTML5 elements. Therefore, you can use these attributes with the <iframe> tag , as well as with all other HTML 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.
Below are the standard HTML5 event handler content attributes.
Again, you can use any of these with the <iframe> element, as well as any other HTML5 element.
- 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.
Differences Between HTML 4 & HTML 5
HTML5 introduced the following attributes:
srcdocsandbox
Both HTML 5.1 and the HTML Living Standard have introduced the following attributes:
seamlessallowfullscreen
HTML5 does not support the following attributes (which were supported in HTML 4 and earlier):
alignlongdescframeborderscrollingmarginwidthmarginheight
Also, in HTML 4 and previous versions you could create "fallback content" by placing content within the opening and closing <iframe> </iframe> tags. In HTML5 however, the <iframe> element never has fallback content.
To see more detail on the HTML 4 and HTML5 versions see HTML5 <iframe> Tag and HTML4 <iframe> Tag. Also check out the links to the official specifications below.
Template
Here's a template for the <iframe> tag with all available attributes for the tag (based on HTML5). These are grouped into attribute types, each type separated by a space. In many cases, you will probably only need one or two (if any) attributes. Simply remove the attributes you don't need.
For more information on attributes for this tag, see HTML5 <iframe> Tag and HTML4 <iframe> Tag.
Tag Details
For more details about the <iframe> tag, see HTML5 <iframe> Tag and HTML4 <iframe> Tag.
Specifications
Here are the official specifications for the <iframe> element.
- HTML5 Specification (W3C)
- HTML Living Standard (WHATWG)
- Current W3C Draft (the next version that is currently being worked on)
- HTML 4 (W3C)
What's the Difference?
W3C creates "snapshot" specifications that don't change once defined. So the HTML5 specification won't change once it becomes an official recommendation. WHATWG on the other hand, develops a "living standard" that is updated on a regular basis. In general, you will probably find that the HTML living standard will be more closely aligned to the current W3C draft than to the HTML5 specification.