Introduction to Iframes
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.
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.
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";
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.