HTML 5 <iframe> Tag
The HTML <iframe>
tag is used to specify an inline frame, or, as the HTML5 specification refers to it, a nested browsing context.
An inline frame allows you to embed another document within the current HTML document. It also allows you to provide an inline frame without using another document - by simply passing the content to the <iframe>
via the srcdoc
attribute.
Usage
Inline frames are often used in online advertising, where the contents of the <iframe>
is an ad from an external party.
Inline frames are typically created using 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.
Inline frames can also be created without a second document. To do this, you need to use the srcdoc
attribute to pass the content that should appear within the inline frame/nested browsing context.
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 <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). However, the WHATWG HTML Living Standard 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.
Note however, that the seamless
attribute is not supported by the W3C HTML5 specification.
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.
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.
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 HTML 5 tags.
- accesskey
- class
- contenteditable
- contextmenu
- dir
- draggable
- dropzone
- hidden
- id
- 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.