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. 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.
// 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() {
// call function in iframed document
window.frames['ifrm'].clearGreeting();
}
}
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.