Communication to and from Iframes

This document tests and demonstrates browser support for certain properties of iframes and capabilities for communication between the document containing the iframe and the window and document inside the iframe.

If your browser supports the iframe onload attribute, and most current browsers do, you will see a statement to that effect in bold letters above the iframe.

The text box and button just below are contained in the current document. If you enter something into the text box and click the button, it should be displayed in the iframe document's text box. If the content is not displayed that means the browser you are using does not support the contentWindow or contentDocument properties. No worries, you could use the frames array to support older browsers. See below.

You can use your browser's menu commands to view source code and save this example document. You can right-click on the iframe to access the source code of the document contained inside it.

References via contentDocument / contentWindow

Internet Explorer 5.5+ supports the contentWindow property. The DOM property contentDocument has broad support among current browsers, such as Firefox, Safari and Opera. Cross-browser code in the document containing the iframe can obtain a reference to an element in the iframed document as follows (view source to see usage with demo form above): 

// get reference to form named 'ifrmTest' 
var iframeEl = document.getElementById('ifrm');
if ( iframeEl.contentDocument ) { // DOM
    var form = iframeEl.contentDocument.getElementById('ifrmTest');
} else if ( iframeEl.contentWindow ) { // IE win
    var form = iframeEl.contentWindow.document.getElementById('ifrmTest');
}

frameElement

The document inside the iframe has a frameElement property pointing to the iframe element in which it is contained. This element is supported by current browsers, including IE 5.5+ win, Safari, Firefox, and Opera (not sure about specific versions). Click the first button in the iframe above to check your browser's support.

If you would like to provide support to browsers who may not include the above properties you could use the frames array to obtain references.

Building References Using the Frames Array

The document containing the iframe can refer to a form element in the document loaded into the iframe using the frames array as follows:

window.frames[iframeName].document.forms[formName].elements[elementName]

The document containing the iframe can refer to a global variable in the document loaded into the iframe as follows:

window.frames[iframeName].variableName

The document located inside the iframe can refer to any object available in the document containing the iframe via the parent keyword. For example:

parent.document.getElementById(id)

The parent keyword can also be used to access global variables or invoke functions in the main document from the document inside the iframe. A button in the iframe above uses this referencing method to increment the containing document's counter variable.

Dont' forget: 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.

Back to Iframes Tutorial