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 to add definition lists into a <dl> element?
<dt> <dd> <li>
<dl>
 <dt>HTML</dt>
  <dd> - Hyper Text Markup Language</dd>
  <dd> - Language for web pages</dd>
</dl>
Which CSS property can hide an element on page, letting an empty space in its place?
display position visibility
#id {
  visibility: hidden;
}
Click on the event which is triggered when the mouse clicks on an object.
onclick onmouseover onfocus
document.getElementById("id").onclick = function(){
  alert("http://CoursesWeb.net/");
}
Indicate the PHP variable that contains the contents of both $_GET, $_POST, and $_COOKIE arrays.
$_SESSION $_GET $_REQUEST
if(isset($_REQUEST["id"])) {
  echo $_REQUEST["id"];
}
Get and change IFrame content through a JavaScript script created in another IFrame

Last accessed pages

  1. HTTP Errors and Logging (39)
  2. Add, Change, and Remove Attributes with jQuery (35999)
  3. Select in MySQL, Output results in HTML Table (3789)
  4. jQuery Drag and Drop Rows between two similar Tables (6875)
  5. PhpSpreadsheet - Read, Write Excel and LibreOffice Calc files (8371)

Popular pages this month

  1. Read Excel file data in PHP - PhpExcelReader (443)
  2. PhpSpreadsheet - Read, Write Excel and LibreOffice Calc files (351)
  3. Register and show online users and visitors (319)
  4. Courses Web: PHP-MySQL JavaScript Ajax HTML CSS Flash-AS3 (300)
  5. Insert, Select and Update NULL value in MySQL (214)