HTML <iframe> tagS2C Home   « HTML <iframe> tag

Definition

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

Pre HTML, 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 HTML document.

Example


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

Required Attributes

NONE

Optional Attributes

height - specifies the height of the inline frame.


<!-- A pixel value -->
<iframe height="150"></iframe>

name - specifies a name to assign to an iframe which can be targeted from another frame or HTML tag attributes:


  <!-- Alphanumeric value -->
  <iframe name="name_of_iframe"></iframe>
  
  <a href="https://server2client.com/htmlbasics/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>

sandbox - specifies a space separated set of restrictions allowed for the iframe - if left empty all restrictions apply.


<!-- allow-forms - allow form submission -->
<!-- allow-pointer-lock - enables pointer lock -->
<!-- allow-popups - allow popup windows -->
<!-- allow-same-origin - treats content as from same origin -->
<!-- allow-scripts - allow script execution excluding popups -->
<!-- allow-top-navigation - allow content to load to the top-level browsing context. -->
<!-- in the example below form submission and popups are allowed, all other restrictions apply -  -->
<iframe sandbox="allow-forms allow-popups"></iframe>

src - specifies the location of the document to display in the iframe.


<iframe src="aURL"></iframe>

srcdoc - specifies the HTML content of the page to display in the iframe.


<!-- If not available will display src attribute contents if available or remain blank -->
<iframe srcdoc="some_HTML_content"></iframe>

width - specifies the width of the iframe.


<!-- A pixel value -->
<iframe width="200"></iframe>

Global Attributes

Common

class - specifies a classname for the element allowing you to apply the style of the predefined class to the content.


<iframe class="classname"></iframe>

id - specifies a unique id for the element allowing you to apply the style of the predefined id to the content.


<iframe id="idname"></iframe>

style - specifies an inline style for the element allowing you to apply the style to the content.


<iframe style="color:red;text-align:left"></iframe>

title - specifies extra information about the content.


<iframe title="information about the content"></iframe>

Keyboard

accesskey - specifies a keyboard shortcut to associate with the element.


<iframe accesskey="aKeyValue"></iframe>

tabindex - specifies a tab order for the element.


<iframe tabindex="someNumber"></iframe>

Language

dir - specifies the directional flow of the content.


<iframe dir="ltr"></i>   <!-- The text will flow from left to right -->
<iframe dir="rtl"></i>   <!-- The text will flow from right to left -->

lang - specifies a language code for the content of the element.


<iframe lang="en"></i>

spellcheck - specifies whether the element is to have its spelling checked.


<!-- Valid values are true and  false - default is inherited / browser specific. -->
<iframe spellcheck="true"></iframe>

translate - specifies whether the content of the element can be translated.


<!-- Valid values are yes and  no - default is yes. -->
<iframe translate="no"></iframe> 

Miscellaneous

contenteditable - specifies whether the content of the element is editable.


<!-- Valid values are true and  false - default is inherited. -->
<iframe contenteditable="false"></iframe> 

draggable - specifies whether the the element is draggable.

Only text selections, images, and links can be dragged.


<!-- Valid values are true and  false - default is browser specific. -->
<iframe draggable="true"></iframe>

hidden - specifies whether the element is not yet, or no longer, relevant.


<!-- Valid values are an empty string or hidden -->
<iframe hidden>Template content here</iframe> 
<iframe hidden="hidden"></iframe> 

Event Attributes

Document

onabort - The JavaScript code to be run on abort.


<iframe onabort="go()"></iframe>   <!-- Executes the go() function -->

onerror - The JavaScript code to be run when an error occurs when the file is being loaded.


<iframe onerror="go()"></iframe>   <!-- Executes the go() function -->

onload - The JavaScript code to be run when the document is loaded.


<iframe onload="go()"></iframe>   <!-- Executes the go() function -->

onresize - The JavaScript code to be run when the browser window is resized.


<iframe onresize="go()"></iframe>   <!-- Executes the go() function -->

onscroll - The JavaScript code to be run when the scrollbar of an element is being scrolled.


<iframe onscroll="go()"></iframe>   <!-- Executes the go() function -->

onunload - The JavaScript code to be run once a page has unloaded or the browser window has been closed.


<iframe onunload="go()"></iframe>   <!-- Executes the go() function -->

Document Element

oncopy - The JavaScript code to be run when the user copies the content of an element.


<iframe oncopy="go()"></iframe>   <!-- Executes the go() function -->

oncut - The JavaScript code to be run when the user cuts the content of an element.


<iframe oncut="go()"></iframe>   <!-- Executes the go() function -->

onpaste - The JavaScript code to be run when the user pastes some content into an element.


<iframe onpaste="go()"></iframe>   <!-- Executes the go() function -->

Drag and Drop

ondrag - The JavaScript code to be run when an element is dragged.


<iframe ondrag="go()"></iframe>   <!-- Executes the go() function -->

ondragend - The JavaScript code to be run when an element has stopped being dragged.


<iframe ondragend="go()"></iframe>   <!-- Executes the go() function -->

ondragenter - The JavaScript code to be run when an element has been dragged to a valid drop target.


<iframe ondragenter="go()"></iframe>   <!-- Executes the go() function -->

ondragleave - The JavaScript code to be run when an element leaves a valid drop target.


<iframe ondragleave="go()"></iframe>   <!-- Executes the go() function -->

ondragover - The JavaScript code to be run when an element is being dragged over a valid drop target.


<iframe ondragover="go()"></iframe>   <!-- Executes the go() function -->

ondragstart - The JavaScript code to be run at the start of a drag operation.


<iframe ondragstart="go()"></iframe>   <!-- Executes the go() function -->

ondrop - The JavaScript code to be run when dragged element is being dropped.


<iframe ondrop="go()"></iframe>   <!-- Executes the go() function -->

Form

onblur - The JavaScript code to be run on abort.


<iframe onblur="go()"></iframe>   <!-- Executes the go() function -->

onchange - The JavaScript code to be run when object changed and attempt to leave field.


<iframe onchange="go()"></iframe>   <!-- Executes the go() function -->

oncontextmenu - The JavaScript code to be run when a context menu is triggered.


<iframe oncontextmenu="go()"></iframe>   <!-- Executes the go() function -->

onfocus - The JavaScript code to be run when the element gets focus.


<iframe onfocus="go()"></iframe>   <!-- Executes the go() function -->

oninput - The JavaScript code to be run when an element gets user input.


<iframe oninput="go()"></iframe>   <!-- Executes the go() function -->

oninvalid - The JavaScript code to be run when an element is invalid.


<iframe oninvalid="go()"></iframe>   <!-- Executes the go() function -->

onreset - The JavaScript code to be run when the reset button of a form is clicked.


<iframe onreset="go()"></iframe>   <!-- Executes the go() function -->

onselect - The JavaScript code to be run when some or all of the contents of an object are selected.


<iframe onselect="go()"></iframe>   <!-- Executes the go() function -->

onsubmit - The JavaScript code to be run when a form is submitted.


<iframe onsubmit="go()"></iframe>   <!-- Executes the go() function -->

Keyboard

onkeydown - The JavaScript code to be run when an element is in focus and keyboard key is pressed.


<iframe onkeydown="go()"></iframe>   <!-- Executes the go() function -->

onkeypress - The JavaScript code to be run when an element is in focus and keyboard key is pressed down and released.


<iframe onkeypress="go()"></iframe>   <!-- Executes the go() function -->

onkeyup - The JavaScript code to be run when an element is in focus and keyboard key is released.


<iframe onkeyup="go()"></iframe>   <!-- Executes the go() function -->

Media

oncanplay - The JavaScript code to be run when a file has buffered enough so it is ready to start playing.


<iframe oncanplay="go()"></iframe>   <!-- Executes the go() function -->

oncanplaythrough - The JavaScript code to be run when a file can be played all the way to the end without further need of buffering.


<iframe oncanplaythrough="go()"></iframe>   <!-- Executes the go() function -->

oncuechange - The JavaScript code to be run when the cue changes when using the track element.


<iframe oncuechange="go()"></iframe>   <!-- Executes the go() function -->

ondurationchange - The JavaScript code to be run when the length of the media is changed.


<iframe ondurationchange="go()"></iframe>   <!-- Executes the go() function -->

onemptied - The JavaScript code to be run when a media resource element suddenly becomes empty, usually due to an error.


<iframe onemptied="go()"></iframe>   <!-- Executes the go() function -->

onended - The JavaScript code to be run when the media has reach the end.


<iframe onended="go()"></iframe>   <!-- Executes the go() function -->

onloadeddata - The JavaScript code to be run when media data is loaded and playback can start.


<iframe onloadeddata="go()"></iframe>   <!-- Executes the go() function -->

onloadedmetadata - The JavaScript code to be run when metadata has been loaded.


<iframe onloadedmetadata="go()"></iframe>   <!-- Executes the go() function -->

onloadstart - The JavaScript code to be run when the media resource has started loading.


<iframe onloadstart="go()"></iframe>   <!-- Executes the go() function -->

onpause - The JavaScript code to be run when the media resource has been paused.


<iframe onpause="go()"></iframe>   <!-- Executes the go() function -->

onplay - The JavaScript code to be run when the media resource starts playback.


<iframe onplay="go()"></iframe>   <!-- Executes the go() function -->

onplaying - The JavaScript code to be run when playback has already begun.


<iframe onplaying="go()"></iframe>   <!-- Executes the go() function -->

onprogress - The JavaScript code to be run when the browser is fetching the media data.


<iframe onprogress="go()"></iframe>   <!-- Executes the go() function -->

onratechange - The JavaScript code to be run when the playback rate changes.


<iframe onratechange="go()"></iframe>   <!-- Executes the go() function -->

onseeked - The JavaScript code to be run when the seeking attribute is set to false indicating that seeking has finished.


<iframe onseeked="go()"></iframe>   <!-- Executes the go() function -->

onseeking - The JavaScript code to be run hen the seeking attribute is set to true indicating that seeking is currently active.


<iframe onseeking="go()"></iframe>   <!-- Executes the go() function -->

onstalled - The JavaScript code to be run when the browser is unable to continue fetching media data.


<iframe onstalled="go()"></iframe>   <!-- Executes the go() function -->

onsuspend - The JavaScript code to be run when media data has stopped before being completely loaded.


<iframe onsuspend="go()"></iframe>   <!-- Executes the go() function -->

ontimeupdate - The JavaScript code to be run when the media resources current playback position has changed.


<iframe ontimeupdate="go()"></iframe>   <!-- Executes the go() function -->

onvolumechange - The JavaScript code to be run when the volume has changed or been muted.


<iframe onvolumechange="go()"></iframe>   <!-- Executes the go() function -->

onwaiting - The JavaScript code to be run when the media resource has paused but is expected to resume.


<iframe onwaiting="go()"></iframe>   <!-- Executes the go() function -->

Mouse

onclick - The JavaScript code to be run when a mouse is clicked on the element.


<iframe onclick="go()"></iframe>   <!-- Executes the go() function -->

ondblclick - The JavaScript code to be run when a mouse is double clicked on the element.


<iframe ondblclick="go()"></iframe>   <!-- Executes the go() function -->

onmousedown - The JavaScript code to be run when the mouse button is pressed down while the cursor is over the element.


<iframe onmousedown="go()"></iframe>   <!-- Executes the go() function -->

onmousemove - The JavaScript code to be run when the mouse button is moved.


<iframe onmousemove="go()">></iframe>   <!-- Executes the go() function -->

onmouseout - The JavaScript code to be run when the mouse cursor moves off an element.


<iframe onmouseout="go()"></iframe>   <!-- Executes the go() function -->

onmouseover - The JavaScript code to be run when the mouse cursor moves over an element.


<iframe onmouseover="go()"></iframe>   <!-- Executes the go() function -->

onmouseup - The JavaScript code to be run when the mouse button is released while the cursor is over the element.


<iframe onmouseup="go()"></iframe>   <!-- Executes the go() function -->

onwheel - The JavaScript code to be run when the mouse wheel rolls up or down over an element.


<iframe onwheel="go()"></iframe>   <!-- Executes the go() function -->

Window

NONE

go to home page Homepage go to top of page Top