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.

Daily Test with Code Example

HTML
CSS
JavaScript
PHP-MySQL
Which tag is used in <table> to create table header cell?
<thead> <th> <td>
<table><tr>
  <th>Title 1</th>
  <th>Title 2</th>
</tr></table>
Which CSS property sets the distance between lines?
line-height word-spacing margin
.some_class {
  line-height: 150%;
}
Which function opens a new browser window.
alert() confirm() open()
document.getElementById("id_button").onclick = function(){
  window.open("http://coursesweb.net/");
}
Indicate the PHP function that returns an array with names of the files and folders inside a directory.
mkdir() scandir() readdir()
$ar_dir = scandir("dir_name");
var_export($ar_dir);
Get and change IFrame content through a JavaScript script created in another IFrame

Last accessed pages

  1. jQuery Drag and Drop Rows between two similar Tables (6738)
  2. Basic HTML elements (3681)
  3. Sport Games (12516)
  4. JQZoom Image Magnifier (9297)
  5. Magic Treasure (283)

Popular pages this month

  1. Flash Games - Free online Games (1536)
  2. Qwop (1269)
  3. Tunnel Rush (1133)
  4. Courses Web: PHP-MySQL JavaScript Ajax HTML CSS Flash-AS3 (1092)
  5. Drag Racer V3 (823)