Access to Iframe and its Document and Content

On this page we use JavaScript to interact with an iframe and the document inside it. First we show how to obtain references to the iframe and its properties and contents. Then we provide an example below which demonstrates how to get and set properties of the iframe, access variables and invoke functions in the iframed document, and reference and modify its elements.

You can get a reference to an iframe using getElementById. You can use that reference to set properties on the iframe, such as style or src:

// reference to iframe with id 'ifrm'
var ifrm = document.getElementById('ifrm');
ifrm.style.width = '400px'; // set width
ifrm.src = 'newpage.html'; // set src to new url

The iframe element also provides contentWindow and contentDocument properties. The following JavaScript uses these properties to get references to the iframed document's window and document objects:

// using reference to iframe (ifrm) obtained above
var win = ifrm.contentWindow; // reference to iframe's window
// reference to document in iframe
var doc = ifrm.contentDocument? ifrm.contentDocument:
        ifrm.contentWindow.document;
// reference to form named 'demoForm' in iframe
var form = doc.getElementById('demoForm');

Once you have references to the window and document objects, you can access virtually any object or property in the iframed document. The above demonstrates referencing a form in the iframed document. The example below extends this further.

Note: These cross-document interactions are only possible if the documents have the same origin. The postMessage method provides the means of interacting cross-domain.

Demonstrating JavaScript Interaction with an Iframe

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

Display:

You can right-click on the iframe to view its document's source code.

JavaScript for the Example

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

// 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');
    
    // set height of iframe and display value
    form.elements.button1.onclick = function() {
        var ifrm = document.getElementById('ifrm');
        var ht = ifrm.style.height = '160px';
        this.form.elements.display.value = 'The iframe\'s height is: ' + ht;
    }
    
    // increment and display counter variable contained in iframed document
    form.elements['button2'].onclick = function() {
        // get reference to iframe window
        var win = document.getElementById('ifrm').contentWindow;
        var counter = ++win.counter; //  increment
        this.form.elements.display.value = 'counter in iframe is: ' + counter;
    }
    
    // reference form element in iframed document
    form.elements.button3.onclick = function() {
        var re = /[^-a-zA-Z!,'?\s]/g; // to filter out unwanted characters
        var ifrm = document.getElementById('ifrm');
        // reference to document in iframe
        var doc = ifrm.contentDocument? 
                ifrm.contentDocument: ifrm.contentWindow.document;
        // get reference to greeting text box in iframed document
        var fld = doc.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.button4.onclick = function() {
        // get reference to iframe window
        var win = document.getElementById('ifrm').contentWindow;
        win.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 information.

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