JavaScript and Iframes - Tutorial and Examples

This tutorial describes and demonstrates using JavaScript to manipulate and interact with iframes, showing how to modify style and other properties of the iframe element, how to communicate with the document inside the iframe, gaining information from it and passing information to it as well as limitations on such access.

Topics listed on the right provide information and demonstration of many aspects of using JavaScript with iframes. The examples are provided in a download file.

Introduction to Iframes

Iframes, or inline frames, allow you to load separate html files into an existing document. Iframes can be placed anywhere in the document flow. CSS and JavaScript can be used to manipulate properties of the iframe, such as its position and size. JavaScript can also be used to pass data back and forth between the document containing the iframe and the document loaded into it.[1]

See Iframe Basics for information about iframes if you are unfamiliar with the element and its attributes.

The iframe element is not valid in strict XHTML or strict HTML4. Documents containing iframes will validate with transitional doctype declarations or with an HTML5 doctype. Some of the attributes that will validate with a transitional doctype will not be valid in HTML5, such as frameborder and scrolling.[2]

Iframe Onload

There is broad browser support for the iframe onload event, including in Internet Explorer 5.5+, Firefox, Chrome, Safari, and Opera. The iframe onload attribute doesn't validate in XHTML or HTML4 but does in HTML5.

You can use JavaScript to assign a function to an iframe's onload event handler property instead of using the iframe tag's onload attribute, but that seems to be less reliable. Another option: you can include an onload handler in the iframed document itself.

See iframe onload demonstrated in this example.

Obtaining Object References

Working with iframes involves referencing two very different objects: the iframe element, and the window generated by the iframe which contains the document loaded into it.

Iframe Element: A reference to the iframe element is obtained via its id attribute. You can use the reference to the iframe element to set its style properties, width for example:

// reference to iframe with id 'ifrm'
var ifrm = document.getElementById('ifrm');
ifrm.style.width = "600px";

The Fluid Iframe example makes use of this in sizing and positioning the iframe. Another example demonstrates modifying the iframe element's src property to Load New Documents into the iframe.

Iframe Window and Document: Information on obtaining references to the window generated by the iframe and to its document is provided in Object References across Iframes. Communication between the containing document and iframed document is explored there, as is JavaScript's Same Origin Policy since an access denied, permission denied or similar error will be triggered if containing document and iframed documents are from different domains.

Dynamically Generating an Iframe

The following code dynamically generates an iframe element, adding it to the end of the document:

var el = document.createElement("iframe");
el.setAttribute('id', 'ifrm');
document.body.appendChild(el);
el.setAttribute('src', 'http://www.example.com');

Dynamically generated iframes are often used with ajax because of their ability to maintain browser history.

More Iframe Topics with Examples

You can find much more information about iframes and their uses by visiting the Topics and Demos listed in the upper right.

Back to top