Communication to and from Iframes

This portion of the Iframes Tutorial demonstrates and provides information for using JavaScript to communicate between the document containing the iframe and the window and document inside the iframe.

More up-to-date DOM methods as well as the old-school frames array method of obtaining access are discussed. Note that JavaScript's same origin policy will be a factor if iframed and containing documents are from different domains.

References via contentDocument / contentWindow

The document containing the iframe can obtain references to properties and elements in the iframed document through contentDocument or contentWindow properties. The contentDocument property has broad support among current browsers, including Internet Explorer 8+, Firefox, Chrome, Safari and Opera. The contentWindow property is supported by Internet Explorer 5.5+, Firefox, Chrome, Safari and Opera. The following provides an example of cross-browser code to reference the window, document and an element in the iframed document:

// reference to iframe with id 'ifrm'
var ifrm = document.getElementById('ifrm');

// reference to window in the iframe
var win = ifrm.contentWindow;

// reference to document in iframe
var doc = ifrm.contentDocument? ifrm.contentDocument: ifrm.contentWindow.document;

// reference to a form named 'ifrmTest' in iframe
var form = doc.getElementById('ifrmTest');

View the example to see these used to send data to a form in an iframe.

References from Iframed Document

Communication between containing document and iframed document can go both ways. The document inside the iframe is able to communicate with its containing document via the following mechanisms.

frameElement: A frameElement property provides access to the iframe element in which the iframed document resides. This property is supported by current browsers, including Internet Explorer 5.5+, Firefox, Chrome, Safari and Opera. Click the first button in the iframe above to check your browser's support. The iframed document can get a reference to the id of its containing iframe element as follows:

window.frameElement.id;

The iframed document can also gain access to parentNode, previousSibling, offsetHeight, and many other properties through its frameElement; for example:

window.frameElement.offsetHeight;

parent: The document located inside the iframe can refer to any object available in the window or document containing the iframe via the parent keyword. For example, the id of a form in the containing document can be obtained using:

parent.document.getElementById('testForm');

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 example's iframe uses this referencing method to increment the containing document's counter variable.

References via the Frames Array

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.

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 also refer to a global variable or property or invoke a function in the document loaded into the iframe using the frames array:

window.frames['iframeName'].propertyName;
window.frames['iframeName'].functionName(arg);

Same Origin Policy

The same origin policy is a security feature of JavaScript that prevents access to properties and methods of documents from different domains. In other words, if the containing document and the iframed document are not from the same domain, attempts to reference each other's objects will result in access denied or similar error messages.

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.

HTML5 introduces cross-document messaging using postMessage which is designed to enable documents from separate domains to communicate with each other while still providing protection from cross-site scripting attacks.

The postMessage method is supported by Internet Explorer 8+, Firefox 3+, Opera 10, Safari and Chrome. There is a jQuery PostMessage Plugin as well as other code that provides fallback mechansims for older browsers. See an article on Cross-Domain Communication with IFrames by Michael Mahemoff for more information.

Back to top