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.