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.