References to Iframes Using the Frames Array

On this page, we use the frames array to access the document in an iframe and interact with it using JavaScript. Although modern methods of referencing are available, it is also possible to use the old-school frames array to access variables, invoke functions, and reference and modify elements in an iframed document, as an example below demonstrates.

A document containing an iframe can obtain a reference to the iframe's window object with the following:

// reference to window in iframe with id or name 'ifrm'
var win = window.frames['ifrm'];

That window object reference can then be used to access other properties. For example, the location property can be used to assign a URL, loading a new page in the iframe:

win.location = 'newpage.html'; // load another document in iframe

The iframe window's document object can be used to obtain references to elements contained within the document:

// get reference to form element 'display' in 'demoForm' in win.document
var el = win.document.forms['demoForm'].elements['display'];

That window reference can also be used by the containing document to access a global variable or property or invoke a function in the document loaded into the iframe:

var ctr = win.counter; // counter variable from win
win.fnName(); // invoke function in win

Note: These cross-document interactions are only possible if the documents have the same origin. The following example demonstrates.

Demonstrating References to Iframes Using Frames Array

Click the following buttons to interact with the iframed document just below. The actions of the buttons are described in the iframe. The JavaScript for the example is displayed below the iframe.

JavaScript for the Example

The JavaScript displayed here is included in this document to perform the tasks demonstrated.

// attach handlers once iframe is loaded
document.getElementById('ifrm').onload = function() {

    // get reference to form to attach button onclick handlers
    var form = document.getElementById('demoForm');
    
    // increment and display counter variable contained in iframed document
    form.elements['button1'].onclick = function() {
        var win = window.frames['ifrm']; // reference to iframe window
        var counter = ++win.counter; // increment
        this.form.elements['display'].value = 'counter in iframed doc is: ' + counter;
    }
    
    form.elements.button2.onclick = function() {
        var re = /[^-a-zA-Z!,'?\s]/g; // to filter out unwanted characters
        var win = window.frames['ifrm']; // reference to iframe window
        // get reference to greeting text box in iframed document
        var fld = win.document.forms['iframeDemoForm'].elements['greeting'];
        var val = fld.value.replace(re, '');
        // display value in text box
        this.form.elements.display.value = 'The greeting is: ' + val;
    }
    
    form.elements.button3.onclick = function() {
        window.frames['ifrm'].clearGreeting(); // call function in iframed document
    }
}

First we assign an anonymous function to the iframe element's onload event. Then we get a reference to the form and assign onclick handlers to its buttons. The text box below the buttons is used to display results. Code comments provide more details.

More examples of cross-document referencing are listed in the upper right.