Communication to and from Iframes
References via contentDocument / contentWindow
The document containing the iframe can obtain references to properties and elements in the iframed document through
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 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:
The iframed document can also gain access to parentNode, previousSibling, offsetHeight, and many other properties through its frameElement; for example:
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:
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:
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:
Same Origin Policy
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
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.
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