Scripting 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.
This tutorial will assist you with loading new documents into iframes, obtaining object references in cross-browser compatible ways, dynamically generating iframes, and use of hidden iframes.
Introduction to Iframes
Page Topics:
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.
The iframe element bears a strong resemblance to the frame element and can be referenced via the frames array. The document displayed in the iframe can also access the main window using the same method used by documents in frames: the parent keyword. See more about this and other referencing methods below.
See this basic example for information about iframes if you are unfamiliar with the element and its attributes.
The iframe element is not valid in strict (X)HTML. Documents containing iframes will validate with transitional or frameset doctype declarations.
Loading New Documents into Iframes
New documents can be loaded into iframes, either by including a target attribute specifying the name of the iframe element, or through JavaScript.
Two methods are available for loading new documents via JavaScript. The first obtains a reference through the frames array and assigns the new url to the location property, as shown here:
window.frames[iframeName].location = url;
Using the frames array for referencing is backwards compatible and more broadly supported by older browsers. The vast majority of browsers in current use will cooperate with assigning the new url to the iframe's src property obtained via document.getElementById:
document.getElementById(iframeId).src = url;
See an example demonstrating both methods.
Scripting Iframes - Object References, etc.
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. Cross-browser cooperation is more likely if you set both the id and name attributes, applying the same value to both for simplicity.
To obtain references to these two elements you can choose between two methods: using the frames array (DOM Level 0) versus newer methods - some standard, some proprietary. See specifics below. If you want to use the frames array referencing method, the name attribute is required.
Iframe Onload: Most browsers in current use support an iframe onload attribute (including IE5.5+, Firefox, Safari, Opera). If you want older browsers to do something once the document has finished loading into the iframe, you can include an onload handler inside that document. That document can then reference the containing document using the parent keyword.
Access Denied Error: An error of access denied or permission denied will be triggered if you try to access properties of the document loaded into the iframe or its window if that document is from another domain. The document.domain property can be set to ease the restriction somewhat. For example, if a document at www.example.com wants to communicate with a document at forums.example.com, the document.domain property could be set to example.com in both documents to allow JavaScript interaction between them.
The Iframe Element Object
A reference to the iframe element is obtained via its id attribute. Theoretically, this should allow for script control of attributes like scrolling and frameborder. In practice, modifying these attributes in script may have no effect. You can use the reference to the iframe element to set its style and src properties with more consistent results.
var iframeElement = document.getElementById(id); iframeElement.style.width = "600px";
See the fluid iframe example, which uses the style object for positioning and sizing the iframe within the available window space, resizing and repositioning the iframe onresize. See also the example demonstrating loading new documents into the iframe using the src property.
The Iframe Window and its Document
References to the window generated by the iframe and to the document loaded into the iframe can be obtained via the frames array using the name attribute.
window.frames[iframeName] window.frames[iframeName].document
The frames array method of referencing has broad support, even among quite old browsers, as long as you attach a name attribute to the iframe. For best results, use both name and id.
For more up-to-date browsers, the document inside the iframe can also be referenced via contentWindow (IE win) and contentDocument (DOM) properties of the iframe element:
// IE5.5+ windows document.getElementById(iframeId).contentWindow document.getElementById(iframeId).contentWindow.document
or,
// DOM document.getElementById(iframeId).contentDocument
An example demonstrates back and forth communication between the document containing the iframe and the document contained within it.
References from Document Inside Iframe
The document loaded into the iframe can access the document containing the iframe, the main window and all objects available in them via the parent keyword. Most current browsers support a frameElement property which provides a reference to the iframe element container. See example demonstrating inter-document communication.
Iframe Content Height
This tutorial previously included code to set the height of an iframe to the height of the document loaded into it so the regular window scrollbars could be used. That code worked reasonably well for most browsers until standards compliant mode needed to be taken into account.
Attempts to update that code have been abandoned due to insurmountable browser incompatibilities. However, one can accomplish the same effect by using a hidden iframe, and then transferring the iframe document's content into a div. Read on and view the example for a demonstration and more information.
Using a Hidden Iframe
You can hide an iframe by setting its width and height to zero or by setting its visibility to hidden in the style sheet. If you set display to none it may not function properly.
A hidden iframe can be used as a buffer for loading external content to be used by or incorporated into your document in any number of possible ways. See an example for more information.
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.google.com');
Dynamically generated iframes are frequently used with layer code, such as tooltips and menus, when they may be used in proximity to select lists. Iframes sized and positioned under layers prevent select list "bleed through" effect in Internet Explorer on Windows.
It would perhaps seem logical to dynamically generate an iframe any time it is to be used for scripting purposes and not for content display. However, a dynamically generated iframe may not always respond the same as one included in the markup. See information on differences at Quirksmode and Coding In Paradise AJAX Tutorial: A Tale of Two IFrames.