Iframe to Iframe Communication
On this page, two iframes interact with each other using JavaScript. First we show how one iframe can get references to the other iframe and the document inside it. Then we provide an example which demonstrates one iframe accessing and modifying the other's properties, objects, and content.
One iframe can get a reference to another iframe in the same document by using the parent
keyword. For example, Iframe 1 can obtain a reference to Iframe 2 as follows:
// in iframe 1, get reference to iframe with id 'ifrm2' in containing document
var ifrm = parent.document.getElementById('ifrm2');
Once you have a reference to the iframe, you can use its contentWindow
and contentDocument
properties to access elements within the document, and any globally accessible variables or functions within the iframe:
var win = ifrm.contentWindow; // reference to iframe 2 window
// reference to iframe 2 document
var doc = ifrm.contentDocument?
ifrm.contentDocument: ifrm.contentWindow.document;
// reference to form element in iframe 2 document
var fld = doc.forms['demoForm'].elements['display'];
var counter = win.counter; // global variable in iframe 2
win.clearGreeting(); // call function in iframe 2
Note: These cross-document interactions are only possible if the documents have the same origin. The following example demonstrates.
Demonstrating Iframe to Iframe Communication
Click the buttons in iframe 1 to interact with iframe 2 according to the descriptions provided. Text boxes in each iframe indicate the results. The JavaScript for this example is displayed below the iframes. You can right-click on the iframes to view their source code.
JavaScript for the Example
The JavaScript displayed here is included in Iframe 1 to perform the tasks demonstrated. Code comments provide some explanation.
// to be sure other iframe loaded
parent.window.onload = function() {
// get reference to form to attach button onclick handlers
var form = document.getElementById('iframe1DemoForm');
form.elements.button1.onclick = function() {
// reference to iframe 2
var ifrm = parent.document.getElementById('ifrm2');
// set height of iframe 2
var ht = ifrm.style.height = '100px';
this.form.elements.display.value = 'Iframe 2 height is: ' + ht;
// show in iframe 2 display text box
var doc = ifrm.contentDocument?
ifrm.contentDocument: ifrm.contentWindow.document;
// reference to display text box
var fld = doc.forms['iframe2DemoForm'].elements['display'];
fld.value = 'My height is now: ' + ht;
}
// increment and display counter variable contained in iframe 2
form.elements['button2'].onclick = function() {
// get reference to iframe 2
var ifrm = parent.document.getElementById('ifrm2');
var win = ifrm.contentWindow; // reference to iframe 2 window
var counter = ++win.counter; // increment
this.form.elements['display'].value =
'counter in iframe 2 is: ' + counter;
// show in iframe 2 display text box
var doc = ifrm.contentDocument?
ifrm.contentDocument: ifrm.contentWindow.document;
// reference to display text box
var fld = doc.forms['iframe2DemoForm'].elements['display'];
fld.value = 'My counter variable is: ' + counter;
}
form.elements.button3.onclick = function() {
var re = /[^-a-zA-Z!,'?\s]/g; // to filter out unwanted characters
// reference to iframe 2
var ifrm = parent.document.getElementById('ifrm2');
// reference to document in iframe 2
var doc = ifrm.contentDocument?
ifrm.contentDocument: ifrm.contentWindow.document;
// get reference to greeting text box in iframe 2
var fld = doc.forms['iframe2DemoForm'].elements['greeting'];
var val = fld.value.replace(re, '');
// display value
this.form.elements.display.value = 'The greeting is: ' + val;
}
form.elements.button4.onclick = function() {
// get reference to iframe 2 window
var win = parent.document.getElementById('ifrm2').contentWindow;
win.clearGreeting(); // call function in iframe 2 document
}
}
More examples of cross-document referencing are listed in the upper right.