How to Access Objects Outside of an Iframe
If you'd like your Web page to display a window that contains another one of your Web pages, you can do that by placing an iframe on your main page. Iframes are not as common as they were in the '90s, but as of the date of publication, all modern browsers support them. Understanding how an iframe communicates with the page that holds it is essential if your iframe needs to access an object that does not exist in its HTML code.
Other People Are Reading
Instructions
-
-
1
Add the following code to the body section of one of your HTML documents:
<iframe id="iframe1" name="iframe1" src="iframe1.htm"></iframe>
<input id="parentTextbox" type="text" value="red" />The first statement creates an iframe that references an HTML document named "iframe1.html." The input tag creates a text box whose value is "red." Save this document, close it and open another HTML document. The document you open will become the page that appears inside the iframe.
-
2
Paste the code shown below into the document's body section:
<input type="button" value="Access Parent" onclick="return accessParent()" />
This code creates a button that calls a function named accessParent when clicked.
-
-
3
Paste the following JavaScript code into the document's script section:
function accessParent() {
var objectToGet = "parentTextbox";
var parentObject = parent.document.getElementById(objectToGet);
var objectValue = parentObject.value;
parentObject.value = "green";
alert("Parent object value = " + objectValue);
}The first statement creates a variable named objectToGet. Its value, "ParentTextbox," is the ID of the text box residing in the parent document. The next statement uses the getElementById method to retrieve that object, and the final statement stores the object's value in the objectValue variable. The alert method displays that value.
-
4
Save this document and name it "iframe1.html." You must give it this name because that is the name the iframe has in the parent document references. At this point the first document you edited, the parent, contains the iframe tag. The second document, the child, appears inside the parent's iframe.
-
5
Launch your Web browser and open the parent document. You will see the second HTML document inside the iframe container. Click the "Access Parent" button to run the code. The JavaScript function runs inside the iframe, retrieves the value stored in the parent's text box and displays the word "red" in a message window.
-
1
Tips & Warnings
Because you have the ability to access a parent's object and make it visible in an iframe, you can examine the object's other properties as well and change them. If you paste parentObject.value = "green" at the end of the JavaScript function, for example, the text box's value changes to "green."
Your iframe cannot access the contents of a parent HTML document if the parent's document lies in a different domain. For instance, if the parent document resides at "http://www.domain1.com," your iframe's document must also reside at that location.
