HTML <iframe>
Tag
An <iframe>
is an inline frame used to embed an HTML document in the current document.
The <iframe>
element allows a nested browsing by embedding an HTML page in the current one.
Excessive use of <iframe>
element can cause performance problems.
Element Attributes
Attribute | Value | Description |
---|---|---|
allow |
This specifies a feature policy for the iframe. | |
allowfullscreen |
false true |
Set to true if iframe can be activated in fullscreen mode by calling requestFullscreen method. |
allowpaymentrequest |
false true |
Set to true if a iframe should be allowed to invoke the Payment Request API. |
height |
pixels | Specifies the height of an iframe. |
loading |
eager lazy |
It specifies whether a browser should load an iframe immediately or to delay loading of iframes. |
name |
text | It specifies the name of the iframe. |
referrerpolicy |
no-referrer no-referrer-when-downgrade origin origin-when-cross-origin same-origin strict-origin-when-cross-origin unsafe-url |
It specifies which referrer to send when fetching frame resources. |
sandbox |
allow-forms allow-pointer-lock allow-popups allow-same-origin allow-scripts allow-top-navigation |
It applies additional restrictions to the content of the frame. |
src |
url | It specifies the address of the document to embed in iframe. |
srcdoc |
button reset submit |
This specifies content to display in iframe.It overrides the src attribute. |
width |
pixels | This specifies the width of an iframe>. |
Global attributes
Global attributes may be applied on all elements, although some elements may have no effect on them.
<accesskey>
,
<class>
,
<contenteditable>
,
<contextmenu>
,
<data-*>
,
<dir>
,
<draggable>
,
<dropzone>
,
<hidden>
,
<id>
,
<lang>
,
<spellcheck>
,
<style>
,
<tabindex>
,
<title>
,
<translate>
.
Global Event Handler Attributes
Global Event Handler attributes may be applied on all elements, although some elements may have no effect on them.
<onabort>
,
<onautocomplete>
,
<onautocompleteerror>
,
<onblur>
,
<oncancel>
,
<oncanplay>
,
<oncanplaythrough>
,
<onchange>
,
<onclick>
,
<onclose>
,
<oncontextmenu>
,
<oncuechange>
,
<ondblclick>
,
<ondrag>
,
<ondragend>
,
<ondragenter>
,
<ondragleave>
,
<ondragover>
,
<ondragstart>
,
<ondrop>
,
<ondurationchange>
,
<onemptied>
,
<onended>
,
<onerror>
,
<onfocus>
,
<oninput>
,
<oninvalid>
,
<onkeydown>
,
<onkeypress>
,
<onkeyup>
,
<onload>
,
<onloadeddata>
,
<onloadedmetadata>
,
<onloadstart>
,
<onmousedown>
,
<onmouseenter>
,
<onmouseleave>
,
<onmousemove>
,
<onmouseout>
,
<onmouseover>
,
<onmouseup>
,
<onmousewheel>
,
<onpause>
,
<onplay>
,
<onplaying>
,
<onprogress>
,
<onratechange>
,
<onreset>
,
<onresize>
,
<onscroll>
,
<onseeked>
,
<onseeking>
,
<onselect>
,
<onshow>
,
<onsort>
,
<onstalled>
,
<onsubmit>
,
<onsuspend>
,
<ontimeupdate>
,
<ontoggle>
,
<onvolumechange>
,
<onwaiting>
.
Learning with HTML Editor "Try it Now"
You can edit the HTML code and view the result using online editor.
Example
<h1>Document in iframe</h1>
<iframe class="d1" src="index.jsp" title="Iframe Example"></iframe>
<h1>Media in iframe</h1>
<iframe class="d2" src="https://www.youtube.com/embed/RL4CyCvt6aw;" allowfullscreen></iframe>
Click on the "Try it Now" button to see how it works.