HTML5 Reference

HTML <iframe> tag

Definition

The <iframe> tag is used to define an inline frame that holds another document.

Pre HTML5, some text could be added between the opening and closing <iframe> tags as a fallback for when the <iframe> tag wasn't supported in a browser, this is no longer allowed and will cause an error when validating a HTML5 document.

Example


<iframe  src="https://server2client.com/htmlreference/main.html"width="600" height="300"></iframe>

Attributes

The following attributes can be used with the <iframe> tag.


<iframe> Specific Attributes
Attribute Value Description Example
allowtextDetermines the container policy that will be used when the feature policy for a Document in the iframe's nested browsing context is initialized.

<iframe src="../../images/apple.jpg"
        allow="geolocation"></iframe>
allowfullscreentrue

false
Specifies that Document objects in the iframe tag's browsing context are to be allowed to use requestFullscreen().

<iframe src="../../images/apple.jpg"
        allowfullscreen="true"></iframe>
allowpaymentrequesttrue

false
Specifies that Document objects in the iframe tag's nested browsing context will be initialized with a feature policy which allows the payment feature to be used to make payment requests from any origin.

<iframe src="../../images/apple.jpg"
        allowpaymentrequest="true"></iframe>
heightNon-negative positive integer gt 0Specifies the height of the iframe in pixels.

<iframe src="../../images/apple.jpg" 
        height="200"></iframe>
nametextSpecifies a name to assign to an iframe which can be targeted from another frame or HTML tag attributes.

<iframe src="../../images/apple.jpg" 
        name="name_of_iframe"></iframe>

<a href="../../lotsofpies.html"
   target="name_of_iframe"></a>

<form action="../htmlintermediate/simpleform.html"
      target="name_of_iframe"></form>

<input type="submit"
       formtarget="name_of_iframe"></input>

<button type="submit"
        formtarget="name_of_iframe"></button>
referrerpolicy

no-referrer

no-referrer-when-downgrade

origin



origin-when-cross-origin



same-origin


strict-origin




strict-origin-when-cross-origin


unsafe-url
Specifies how much referrer information is sent.

No referrer information is to be sent.

Full referrerURL stripped of referrerURL and current URL and untrustworthy URLs.


Only the ASCII serialization of the request’s referrerURL is sent as referrer information when making both same-origin-referrer requests and cross-origin-referrer requests.

Full referrerURL is sent as referrer information when making same-origin-referrer requests and only the ASCII serialization of the origin of the request’s referrerURL is sent as referrer information when making cross-origin-referrer requests

Full referrerURL sent as referrer information when making same-origin-referrer requests.

ASCII serialization of origin of the referrerURL whose referrerURL and current URL are both potentially trustworthy URLs, or whose referrerURL is a non-potentially trustworthy URL.

Full referrerURL sent as referrer information for same-origin-referrer requests and only the ASCII serialization of the origin of the request’s referrerURL when making cross-origin-referrer requests.

Full referrerURL sent along for both same-origin-referrer requests and cross-origin-referrer requests.

<iframe src="../../images/apple.jpg"  
        referrerpolicy="no-referrer"></iframe>
sandbox

allow-forms

allow-pointer-lock

allow-popups

allow-same-origin

allow-scripts

allow-top-navigation
Specifies a space separated set of restrictions allowed for the iframe - if left empty all restrictions apply.

Allow form submission.

Enables pointer lock.

Allow popup windows.

Treats content as from same origin

Allow script execution excluding popups.

Allow content to load to the top-level browsing context.

<!-- In example below :- -->
<!-- Form submission and popups allowed. -->
<!-- All other restrictions apply.  -->
<iframe src="../../images/apple.jpg" 
     sandbox="allow-forms allow-popups"></iframe>
srcurlSpecifies the location of the resource to display in the iframe.

<iframe src="../../images/apple.jpg"></iframe>
srcdocurlSpecifies the HTML content of the page to display in the iframe.

Generally used with the sandbox attribute to provide an additional layer of security.

<iframe src="../../images/apple.jpg"  
        srcdoc="<p>Some HTML content</p>"></iframe>
widthNon-negative positive integer gt 0Specifies the width of the iframe in pixels.

<iframe src="../../images/apple.jpg" 
        width="200"></iframe>
<iframe> Global Attributes
Attribute Description Example
Common
classSpecifies a classname for the element allowing you to apply the style of the predefined class to the content.

<iframe src="../../images/apple.jpg" class="name"></iframe>
idSpecifies a unique id for the element allowing you to apply the style of the predefined id to the content.

<iframe src="../../images/apple.jpg" id="name"></iframe>
styleSpecifies an inline style for the element allowing you to apply the style to the contentt.

<iframe src="../../images/apple.jpg" style="color:red;"></iframe>
titleSpecifies an inline style for the element allowing you to apply the style to the content.

<iframe src="../../images/apple.jpg" title="Content info"></iframe>
Keyboard
accesskeySpecifies a keyboard shortcut to associate with the element.

<iframe src="../../images/apple.jpg" accesskey="a"></iframe>
tabindexSpecifies a tab order for the element.

<iframe src="../../images/apple.jpg" tabindex="1"></iframe>
Language
dirSpecifies the directional flow of the content.

<!-- The text will flow from left to right -->
<iframe src="../../images/apple.jpg" dir="ltr"></iframe>
<!-- The text will flow from right to left -->
<iframe src="../../images/apple.jpg" dir="rtl"></iframe>
langSpecifies a language code for the content of the element.

<iframe src="../../images/apple.jpg" lang="en"></iframe>
spellcheckSpecifies an inline style for the element allowing you to apply the style to the contentt.

<!-- Valid values true and false. -->
<!-- Default inherited/browser specific. -->
<iframe src="../../images/apple.jpg" spellcheck="true"></iframe> 
translateSpecifies an inline style for the element allowing you to apply the style to the content.

<!-- Valid values yes and no. -->
<!-- Default yes. -->
<iframe src="../../images/apple.jpg" translate="no"></iframe> 
Miscellaneous
contenteditableSpecifies whether the content of the element is editable.

<!-- Valid values true and false. -->
<!-- Default inherited. -->
<iframe src="../../images/apple.jpg" contenteditable="true"></iframe> 
draggableSpecifies whether the element is draggable.

<!-- Valid values true and false. -->
<!-- Default browser specific. -->
<iframe src="../../images/apple.jpg" draggable="true"></iframe>
hiddenSpecifies whether the element is not yet, or no longer, relevant.

<!-- Valid values an empty string or hidden -->
<iframe src="../../images/apple.jpg" hidden></iframe> 
<iframe src="../../images/apple.jpg" hidden="hidden"></iframe> 
<iframe> Event Attributes
Attribute Description Example
Document Element
oncopyThe script to be run when the user copies the content of an element.

 <!-- Executes go() function -->
<iframe src="../../images/apple.jpg" oncopy="go()"></iframe> 
oncutThe script to be run when the user cuts the content of an element.

 <!-- Executes go() function -->
<iframe src="../../images/apple.jpg" oncut="go()"></iframe>
onpasteThe script to be run when the user pastes some content into an element.

 <!-- Executes go() function -->
<iframe src="../../images/apple.jpg" onpaste="go()"></iframe>
Drag and Drop
ondragThe script to be run when an element is dragged.

 <!-- Executes go() function -->
<iframe src="../../images/apple.jpg" ondrag="go()"></iframe>
ondragendThe script to be run when an element has stopped being dragged.

 <!-- Executes go() function -->
<iframe src="../../images/apple.jpg" ondragend="go()"></iframe>
ondragenterThe script to be run when an element has been dragged to a valid drop target.

 <!-- Executes go() function -->
<iframe src="../../images/apple.jpg" ondragenter="go()"></iframe>
ondragleaveThe script to be run when an element leaves a valid drop target.

 <!-- Executes go() function -->
<iframe src="../../images/apple.jpg" ondragleave="go()"></iframe>
ondragoverThe script to be run when an element is being dragged over a valid drop target.

 <!-- Executes go() function -->
<iframe src="../../images/apple.jpg" ondragover="go()"></iframe>
ondragstartThe script to be run at the start of a drag operation.

 <!-- Executes go() function -->
<iframe src="../../images/apple.jpg" ondragstart="go()"></iframe>
ondropThe script to be run when a dragged element is being dropped.

 <!-- Executes go() function -->
<iframe src="../../images/apple.jpg" ondrop="go()"></iframe>
Form
onblurThe script to be run when the element loses focus.

 <!-- Executes go() function -->
<iframe src="../../images/apple.jpg" onblur="go()"></iframe>
onchangeThe script to be run when object changed and attempt to leave field.

 <!-- Executes go() function -->
<iframe src="../../images/apple.jpg" onchange="go()"></iframe>
oncontextmenuThe script to be run when a context menu is triggered.

 <!-- Executes go() function -->
<iframe src="../../images/apple.jpg" oncontextmenu="go()"></iframe>
onfocusThe script to be run when the element gets focus.

 <!-- Executes go() function -->
<iframe src="../../images/apple.jpg" onfocus="go()"></iframe>
oninputThe script to be run when an element gets user input.

 <!-- Executes go() function -->
<iframe src="../../images/apple.jpg" oninput="go()"></iframe>
oninvalidThe script to be run when an element is invalid.

 <!-- Executes go() function -->
<iframe src="../../images/apple.jpg" oninvalid="go()"></iframe>
onresetThe script to be run when a dragged element is being dropped.

 <!-- Executes go() function -->
<iframe src="../../images/apple.jpg" onreset="go()"></iframe>
onselectThe script to be run when some or all of the contents of an object are selected.

 <!-- Executes go() function -->
<iframe src="../../images/apple.jpg" onselect="go()"></iframe>
onsubmitThe script to be run when a form is submitted.

 <!-- Executes go() function -->
<iframe src="../../images/apple.jpg" onsubmit="go()"></iframe>
Keyboard
onkeydownThe script to be run when an element is in focus and keyboard key is pressed down.

 <!-- Executes go() function -->
<iframe src="../../images/apple.jpg" onkeydown="go()"></iframe>
onkeypressThe script to be run when an element is in focus and keyboard key is pressed down and released.

 <!-- Executes go() function -->
<iframe src="../../images/apple.jpg" onkeypress="go()"></iframe>
onkeyupThe script to be run when an element is in focus and keyboard key is released.

 <!-- Executes go() function -->
<iframe src="../../images/apple.jpg" onkeyup="go()"></iframe>
Media
onabortThe script code to be run on abort.

 <!-- Executes go() function -->
<iframe src="../../images/apple.jpg" onabort="go()"></iframe>
oncanplayThe script to be run when a file has buffered enough so it is ready to start playing.

 <!-- Executes go() function -->
<iframe src="../../images/apple.jpg" oncanplay="go()"></iframe>
oncanplaythroughThe script to be run when a file can be played all the way to the end without further need of buffering.

 <!-- Executes go() function -->
<iframe src="../../images/apple.jpg" oncanplaythrough="go()"></iframe>
oncuechangeThe script to be run when the cue changes when using the track element.

 <!-- Executes go() function -->
<iframe src="../../images/apple.jpg" oncuechange="go()"></iframe>
ondurationchangeThe script to be run when the length of the media is changed.

 <!-- Executes go() function -->
<iframe src="../../images/apple.jpg" ondurationchange="go()"></iframe>
onemptiedThe script to be run when a media resource element suddenly becomes empty, usually due to an error.

 <!-- Executes go() function -->
<iframe src="../../images/apple.jpg" onemptied="go()"></iframe>
onendedThe script to be run when the media has reach the end.

 <!-- Executes go() function -->
<iframe src="../../images/apple.jpg" onended="go()"></iframe>
onloadeddataThe script to be run when media data is loaded and playback can start.

 <!-- Executes go() function -->
<iframe src="../../images/apple.jpg" onloadeddata="go()"></iframe>
onloadedmetadataThe script to be run when metadata has been loaded.

 <!-- Executes go() function -->
<iframe src="../../images/apple.jpg" onloadedmetadata="go()"></iframe>
onloadstartThe script to be run whenthe media resource has started loading.

 <!-- Executes go() function -->
<iframe src="../../images/apple.jpg" onloadstart="go()"></iframe>
onpauseThe script to be run when the media resource has been paused.

 <!-- Executes go() function -->
<iframe src="../../images/apple.jpg" onpause="go()"></iframe>
onplayThe script to be run when the media resource starts playback.

 <!-- Executes go() function -->
<iframe src="../../images/apple.jpg" onplay="go()"></iframe>
onplayingThe script to be run when when playback has already begun.

 <!-- Executes go() function -->
<iframe src="../../images/apple.jpg" onplaying="go()"></iframe>
onprogressThe script to be run when the browser is fetching the media data.

 <!-- Executes go() function -->
<iframe src="../../images/apple.jpg" onprogress="go()"></iframe>
onratechangeThe script to be run when the playback rate changes.

 <!-- Executes go() function -->
<iframe src="../../images/apple.jpg" onratechange="go()"></iframe>
onseekedThe script to be run when the seeking attribute is set to false indicating that seeking has finished.

 <!-- Executes go() function -->
<iframe src="../../images/apple.jpg" onseeked="go()"></iframe>
onseekingThe script to be run when the seeking attribute is set to true indicating that seeking is currently active.

 <!-- Executes go() function -->
<iframe src="../../images/apple.jpg" onseeking="go()"></iframe>
onstalledThe script to be run when the browser is unable to continue fetching media data.

 <!-- Executes go() function -->
<iframe src="../../images/apple.jpg" onstalled="go()"></iframe>
onsuspendThe script to be run when media data has stopped before being completely loaded.

 <!-- Executes go() function -->
<iframe src="../../images/apple.jpg" onsuspend="go()"></iframe>
ontimeupdateThe script to be run when the media resources current playback position has changed.

 <!-- Executes go() function -->
<iframe src="../../images/apple.jpg" ontimeupdate="go()"></iframe>
onvolumechangeThe script to be run when the volume has changed or been muted.

 <!-- Executes go() function -->
<iframe src="../../images/apple.jpg" onvolumechange="go()"></iframe>
onwaitingThe script to be run when the media resource has paused but is expected to resume.

 <!-- Executes go() function -->
<iframe src="../../images/apple.jpg" onwaiting="go()"></iframe>
Mouse
onclickThe script to be run when when a mouse is clicked on an element.

 <!-- Executes go() function -->
<iframe src="../../images/apple.jpg" onclick="go()"></iframe>
ondblclickThe script to be run when a mouse is double clicked on an element.

 <!-- Executes go() function -->
<iframe src="../../images/apple.jpg" ondblclick="go()"></iframe>
onmousedownThe script to be run when he mouse button is pressed down while the cursor is over an element.

 <!-- Executes go() function -->
<iframe src="../../images/apple.jpg" onmousedown="go()"></iframe>
onmousemoveThe script to be run when the mouse button is moved.

 <!-- Executes go() function -->
<iframe src="../../images/apple.jpg" onmousemove="go()"></iframe>
onmouseoutThe script to be run when the mouse cursor moves off an element.

 <!-- Executes go() function -->
<iframe src="../../images/apple.jpg" onmouseout="go()"></iframe>>
onmouseoverThe script to be run when the mouse cursor moves over an element.

 <!-- Executes go() function -->
<iframe src="../../images/apple.jpg" onmouseover="go()"></iframe>
onmouseupThe script to be run when the mouse button is released while the cursor is over the element.

 <!-- Executes go() function -->
<iframe src="../../images/apple.jpg" onmouseup="go()"></iframe>
onwheelThe script to be run when the mouse wheel rolls up or down over an element.

 <!-- Executes go() function -->
<iframe src="../../images/apple.jpg" onwheel="go()"></iframe>
Scroll
onscrollThe script code to be run when the scrollbar of an element is being scrolled.

 <!-- Executes go() function -->
<iframe src="../../images/apple.jpg" onscroll="go()"></iframe> 
Window - NONE

Relevant HTML Tutorials

HTML Lessons - Inline Frames