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.

View Output

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

Inline HTML to embed, overriding the src attribute.

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.

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:

Attribute	Description
(empty string)	By using the empty string, all sandbox restrictions are applied.
`allow-top-navigation`	Allows the nested browsing context to navigate (load) content to the top-level browsing context.
`allow-same-origin`	Allows the content to be treated as being from its normal origin. Without this token, the content is forced into a unique origin, thus preventing it from accessing other content from the same origin. Also, without the allow-same-origin token, scripts are prevented from reading from or writing to the `document.cookie` IDL attribute, and blocks access to `localStorage` and `openDatabase().` [WEBSTORAGE] [WEBSQL].
`allow-forms`	Allows form submission (i.e. the nested browsing context can submit forms).
`allow-scripts`	Allows script execution (but not popup windows).
`allow-pointer-lock`	Enables 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.
`allow-popups`	Allows popup windows.
`allow-presentation`	Lets the resource start a presentation session.

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).

allowpaymentrequest Whether the iframe's contents are allowed to use the Payment Request API to make payment requests.

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 (although the tabindex attribute does not apply to dialog elements).

accesskey
autocapitalize
class
contenteditable
data-*
dir
draggable
hidden
id
inputmode
is
itemid
itemprop
itemref
itemscope
itemtype
lang
part
slot
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.

onabort
onauxclick
onblur
oncancel
oncanplay
oncanplaythrough
onchange
onclick
onclose
oncontextmenu
oncopy
oncuechange
oncut
ondblclick
ondrag
ondragend
ondragenter
ondragexit
ondragleave
ondragover
ondragstart
ondrop
ondurationchange
onemptied
onended
onerror
onfocus
onformdata
oninput
oninvalid
onkeydown
onkeypress
onkeyup
onlanguagechange
onload
onloadeddata
onloadedmetadata
onloadstart
onmousedown
onmouseenter
onmouseleave
onmousemove
onmouseout
onmouseover
onmouseup
onpaste
onpause
onplay
onplaying
onprogress
onratechange
onreset
onresize
onscroll
onsecuritypolicyviolation
onseeked
onseeking
onselect
onslotchange
onstalled
onsubmit
onsuspend
ontimeupdate
ontoggle
onvolumechange
onwaiting
onwheel

For a full list of event handlers, see HTML 5 event handler content attributes.