Get and change IFrame content through a JavaScript script created in another IFrame

This tutorial shows you how to get and change the content of an IFrame, by accessing a variable and a function defined in it, through a button and a Javascript script created in another IFrame.

It is important to know that the pages that are included in the IFrames must be on the same server as the main page, or else it will not work for security reasons.

Going straight to the point, to get and change the content of an IFrame through another IFrame, you use their common base, the Main Page, also named "Parent", using the parent property and the name of the IFrame that will be accessed (name that is specified in the "name" attribute in the <iframe> tag).

Syntax:

var var_name = parent.iframe_name.element;

- element - can be an object, a variable, or function in the "iframe_name".

Here's an example (explanations are in the code).

1) First, create a file named "ifr1.htm", that will represent the page included in the first IFrame.

Code ifr1.htm

<html>
<head>
<title>Page for IFrame 1</title>
<script type="text/javascript"><!--
// Stores a value in the variable "var_ifr1", that will be accessed in the second iframe
var var_ifr1 = '<b>Value of the variable from iframe 1</b>';

// Function that replace the content of the DIV "div_ifr1" with the value of its parameter
// It will be called from iframe 2
function f_ifr1(txt) {
 document.getElementById('div_ifr1').innerHTML = txt;
}
//--></script>
</head>
<body>
IFRAME 1
Content in BODY
<div id="div_ifr1">Div content of the iframe 1</div>
</body>
</html>

2) Now create the page "ifr2.htm", for the second IFrame, with a button that calls a JavaScript function that will get the content of the first iframe "ifr1.html", and the value of a variable defined in it (see the comments in script).

Code ifr2.htm

<html>
<head></head>
<title>Page for IFrame 2</title>
<body>
IFRAME 2<br>

<script type="text/javascript"><!--
function f_ifr2(txt) {
 // get the BODY content of the iframe 1, "ifr1"
 var c_ifr1 = parent.ifr1.document.body.innerHTML;

 alert(c_ifr1); // Displays the content in an alert window

 // gets the value of the variable "var_ifr1", defined in the iframe 1, "ifr1"
 var from_ifr1 = parent.ifr1.var_ifr1;
 // Displays in a tag in this iframe the value of the variable defined in iframe 1
 document.getElementById('d_ifr2').innerHTML = from_ifr1;
 
 // Calls the function "f_ifr1", defined in iframe 1
 parent.ifr1.f_ifr1(txt);
}
//--></script>
<div id="d_ifr2"> </div>
<button onclick="f_ifr2('<b>The text changed from iframe 2</b>')">Action iframe</button>
</body>
</html>

3) The last step is to create the parent page, "main.html", that will contain and display the two IFrames.

Code main.html

<html>
<head><title>Main Page</title></head>
<body>
<h3>Main Page</h3>
<h4>First iframe</h4>
<iframe src="ifr1.htm" id="ifr1" name="ifr1"></iframe>

<br><h4>Second iframe</h4>
<iframe src="ifr2.htm" id="ifr2" name="ifr2"></iframe>
</body>
</html>

- This example will display the following result:

Main page

First iframe

IFRAME 1 Content in BODY

Div content of the iframe 1

Second iframe

IFRAME 2

- When you click on the buton "Action iframe" (displyed in the second iframe), the function "f_ifr2()" is called. It gets and displays in an Alert window the content of the IFrame 1, then gets the value of the variable "var_ifr1", calls the function "f_ifr1()" (created in the first IFrame), passing it a text that will replace the content of a tag in IFrame 1.
- All these actions will be performed from the second IFrame to the code created in the first IFrame, by using the "parent" property.

<<-Get and Modify content .. -- Display / Simulate a ..->>

Daily Test with Code Example

HTML

CSS

JavaScript

PHP-MySQL

Which tag is used to add lists into <ul> and <ol> elements?

<ul>
 <li>http://coursesweb.net/html/</li>
 <li>http://coursesweb.net/css/</li>
</ul>

Which value of the "display" property creates a block box for the content and ads a bullet marker?

block list-item inline-block

.some_class {
  display: list-item;
}

Which instruction converts a JavaScript object into a JSON string.

JSON.parse() JSON.stringify eval()

var obj = {
 "courses": ["php", "javascript", "ajax"]
};
var jsonstr = JSON.stringify(obj);
alert(jsonstr);    // {"courses":["php","javascript","ajax"]}

Indicate the PHP class used to work with HTML and XML content in PHP.

stdClass PDO DOMDocument

$strhtml = '<body><div id="dv1">CoursesWeb.net</div></body>';
$dochtml = new DOMDocument();
$dochtml->loadHTML($strhtml);
$elm = $dochtml->getElementById("dv1");
echo $elm->nodeValue;    // CoursesWeb.net