Home > Abakada: Back to Basics > Language References > HTML Elements > IFRAME Element

---

Defines the contents and appearance of an inline frame.

HTML 4, 5

HTML Syntax

<iframe
   align = absbottom | absmiddle | baseline | bottom | left | middle | right | texttop | top
   border = pixels
   bordercolor = color
   class = classname
   datafld = colname
   datasrc = #id
   frameborder = no | yes | 0 | 1
   framespacing = pixels
   height = n
   hspace = pixels
   id = value
   marginheight = pixels
   marginwidth = pixels
   name = window_name | _blank | _parent | _self | _top
   noresize = noresize | resize
   scrolling = auto | no | yes
   src = url
   style = css_style_rules
   title = text
   vspace = pixels
   width = n
>

The IFRAME element allows authors to insert a frame with its own contents within an HTML page. The IFRAME functions as a document within a document, or like a floating FRAME.

The IFRAME can display a distinct HTML document. The element’s src attribute specifies the initial document the IFRAME will contain. Authors can also provide alternate content, written between the IFRAME start and end tags, for browsers that do not support frames or are configured not to display frames.

The IFRAME is normally assigned a name to identify and reference the frame. This name may be used as the target of subsequent links.

Authors can also specify the appearance of an IFRAME, using the element’s rendering attributes. Unlike frames, an IFRAME can not be resized.

NOTE: Both start and end tags are required.

The <iframe> element supports the following attributes, in addition to global attributes common to all HTML elements.

Attribute	Value	Description
allow		Specifies a feature policy for the iframe
allowfullscreen		Set to true if the iframe can activate fullscreen mode by calling the requestFullscreen() method
allowpaymentrequest		Set to true if a cross-origin iframe should be allowed to invoke the Payment Request API
height	pixels	Specifies the height of an iframe. Default height is 150 pixels
loading	eager, lazy	Specifies whether a browser should load an iframe immediately or to defer loading of iframes until some conditions are met
name	text	Specifies the name of an iframe
referrerpolicy	no-referrer, no-referrer-when-downgrade, origin, origin-when-cross-origin, same-origin, strict-origin-when-cross-origin, unsafe-url	Specifies which referrer information to send when fetching the iframe
sandbox	allow-forms, allow-pointer-lock, allow-popups, allow-same-origin, allow-scripts, allow-top-navigation	Enables an extra set of restrictions for the content in an iframe
src	URL	Specifies the address of the document to embed in the iframe
srcdoc	HTML_code	Specifies the HTML content of the page to show in the iframe
width	pixels	Specifies the width of an iframe. Default width is 300 pixels

For browsers that support frames, the following example renders an inline frame containing the file sample.html.

<iframe src="sample.html" scrolling="auto" width="400" frameborder="1"></iframe>

The following provides alternate content which should be displayed only by browsers that do not support frames.

<iframe src="sample.html" ... >Your browser does not support frames or 
   is currently configured not to display frames. To view the related document, 
   click <a href="sample.html">here</a></iframe>

Properties of an IFRAME object can be accessed through the object model of the page where the IFRAME resides. Typical notation is:

IE4 and later

document.all['iframeID'].property

IE5 and NN6

document.getElementById ( 'iframeID' ).property

Assuming for example that we have an IFRAME object with an id=iframe1. To access the border style of the IFRAME:

document.getElementById ( 'iframeID' ).style.border;

On the other hand, access to the objects of the source document of the IFRAME is provided through the frames collection. This allows authors to read or write to elements contained in the IFRAME. Typical notation is:

document.frames ( 'iframeID' ).document.object.property

For example, to access the backgroundColor of the BODY object in the IFRAME:

document.frames ( 'iframe1' ).document.body.style.backgroundColor = "khaki";

The following returns a collection of all elements of the document contained in the IFRAME, using the documentElement object.

var els = document.frames ( 'iframe1' ).document.documentElement.childNodes

FRAME   frames   Using Frames and Framesets