In this example I will explain how to call HTML page elements in nested child iFrames. This can be handy if, for example, you want to get something a user has entered into a text entry box that is contained in an embedded iFrame, or even in a nested set of iFrames several levels deep.
For starters I should warn you that if you want to call nested iFrames from a parent frame, the pages in the iFrames have to be on the same domain. This single origin policy is enforced by browsers for security and content ownership purposes since otherwise a programmer could embed pages from other sites and handle them as if they were actually the programmer’s application.
Setting up the Example
In this example I will show how to get the values from a main parent page on the click of a button of user-input text from text boxes that are located in iFrames one and two levels deep. You can, of course, take this concept and expand on it to however many iFrame levels that you need to work with.
Just to note: I will give this example in pure JavaScript since, in my opinion, it does not warrant using a third party plugin library.
The primary JavaScript helper function in getting references to child iFrames is .contentWindow You simply have to reference the iFrame on your page using a standard document.getElementById and then by appending .contentWindow, you have a working reference to the DOM of the HTML page in your iFrame. You can stack this to as many nested iFrames as you need using this concept.
As you can see from the image at the start of this article, this example involves three HTML pages. The first is called TopFrame.html and is the parent page that has the other two pages nested within it in iFrames. The parent page also has a button that calls a function to alert the values of user entered text on the text areas of the embedded iFrame pages.
The first embedded iFrame page is called MidFrame.html and the page background is set to green in order to make it easy to tell where it is.
The second iFrame is embedded within MidFrame.html and is called LowestFrame.html. Its background is color-coded to yellow for visibility.
How to Call Elements on Nested iFrame Pages
For clarity I have split the call to the text area on the first child iFrame page into two sections.
1) Here is the syntax to get a reference to the working DOM of the nested iFrame page:
var midFrame = document.getElementById('idMidFrame').contentWindow;
As you can see, this call gets a reference to the iFrame tag and then uses the JavaScript .contentWindow function to access the nested HTML page. At this point we have a reference to the HTML DOM of the child page and can manipulate it just like any other HTML page
2) We can now take the reference to the child page and address elements on the page. So for example to get the user input value of a text area on the nested iFrame page we would write:
midFrame.document.getElementById('txtMidFrameText').value
3) To get a reference to an iFrame page nested within an iFrame page is now just a matter of extending the concepts above.
Here’s an example of setting up a second variable that references an iFrame nested within the first iFrame that we wrote a variable to reference in the code above:
var lowestFrame = midFrame.document.getElementById('idLowestFrame').contentWindow;
Easy, right? Now here’s the fully functional example code that will render and function exactly like I’ve shown above:
The Example Code:
When putting together this example, have all three pages within one directory and open the HTML page called TopFrame.html When you click the button in the parent frame page it will alert the values of the text areas of the embedded iFrame Web pages.
————————TopFrame.html————————
<html>
<head>
<script>
function getNestedFrameProperties(){
var midFrame = document.getElementById('idMidFrame').contentWindow;
var lowestFrame = midFrame.document.getElementById('idLowestFrame').contentWindow;
alert('Mid Frame Text=' + midFrame.document.getElementById('txtMidFrameText').value + '\r\n\r\nLowest Frame Text=' + lowestFrame.document.getElementById('txtLowestFrameValue').value);
}
</script>
</head>
<body>
Top Frame Page<br>
<input type="button" id="btnSubFrameProperties" value="Get Nested iFrame Properties" onClick="getNestedFrameProperties();"><br>
<a href="http://MidFrame.html">http://MidFrame.html</a>
</body>
</html>
————————MidFrame.html————————
<html> <head></head> <body style="background-color:green;"> Mid Frame Page<br> <input type="text" id="txtMidFrameText" value="MID FRAME TEXT"><br> <a href="http://LowestFrame.html">http://LowestFrame.html</a> </body> </html>
————————LowestFrame.html————————
<html> <head></head> <body style="background-color:yellow;"> Lowest Frame Page <input type="text" id="txtLowestFrameValue" value="Text from the lowest iFrame"> </body> </html>
I hope that you have found this example useful. As always, please feel free to drop me a line in the comments section below.
Justin Cooney 
Leave a comment