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.
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.