JavaScript Interaction between Iframe and Parent

On this page, a document in an iframe uses JavaScript to interact with its parent document. First we show how the document in the iframe can get references to the iframe element containing it and to the containing document and its properties and objects. Then we provide an example below which demonstrates how to access variables and invoke functions in the parent document, and reference and modify its elements.

A document in an iframe can obtain a reference to the iframe element containing it through the frameElement property of the window object.[1] The frameElement property provides access to a variety of other properties, including offsetHeight, parentNode, ownerDocument, and much more.[2] You could use it to access any object or property in the containing document. Here are a few examples:

var ifrm = window.frameElement; // reference to iframe element container
var doc = ifrm.ownerDocument; // reference to container's document
var form = doc.forms[0]; // reference to first form in container document

However, unless you are trying to access specific properties of the iframe element itself, it is simpler to use the parent property to access the containing document. For example, you can reference a form in the containing document as follows:

// reference to first form in parent document
var form = parent.document.forms[0];
// or, using form id instead
var form = parent.document.getElementById('myForm');

The parent keyword can also be used to access global variables or invoke functions in the main document from the document inside the iframe, as the example below demonstrates.

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 Access to Parent from Iframe

Click the buttons in the iframe below to interact with the containing document as described. The JavaScript for the example is displayed below the iframe.

JavaScript for the Example

The JavaScript displayed here is included in the iframed document above to perform the tasks demonstrated. Code comments provide some explanation.

// get reference to form to attach button onclick handlers
var form = document.getElementById('iframeDemoForm');

// display offsetHeight of frameElement containing iframed document
form.elements.button1.onclick = function() {
    this.form.elements.display.value = window.frameElement.offsetHeight;

// increment and display counter variable contained in parent document
form.elements['button2'].onclick = function() {
    this.form.elements['display'].value = 'counter in parent document is: ' + parent.counter;

form.elements.button3.onclick = function() {
    var re = /[^-a-zA-Z!,'?\s]/g; // to filter out unwanted characters
    // get reference to greeting text box in containing document
    var fld = parent.document.forms['demoForm'].elements['greeting'];
    var val = fld.value.replace(re, '');
    // display value in iframed document's text box
    this.form.elements.display.value = 'The greeting is: ' + val;

form.elements.button4.onclick = function() {
    parent.clearGreeting(); // call function in parent document

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

  1. The frameElement property would be null for a window that is not contained in an iframe. The frameElement property is supported by current browsers, including Firefox, Chrome, Safari, Opera and Internet Explorer 5.5+. ^
  2. Firebug's DOM panel gives a complete view of the frameElement properties and values. ^