• Another useful tutorial about JavaScript and iframe on the page:
coursesweb.net/javascript/frame-iframe-object


In this tutorial it is present the mode to get and modify content in an IFRAME, from the main page, using JavaScript.

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


Going straight to the point, to get and modify the content of an IFrame, you can use the contentWindow property, it returns the window object of a specified iframe.
Here's an example to understand how to apply this property.

1) First create a file "ifr.htm" that will contain the HTML code of the page that will be displayed in the IFrame.

Code ifr.htm

<html>
<head><title>Iframe page</title></head>
<body>
 Content to be displayed in iframe ...
</body>
</html>

2) Define the main page, for example "main.html" (in the same folder on the server), in which write the code to include the IFrame and the JavaScript that will retrieve and modify the content of the IFrame.
- Necessary explanations are in the script code.

Code main.html

<html>
<head><title>Main page</title></head>
<body>
<script>
function get_iframe(ifr_id) {
 // gets the object that refers to the iframe, uasing its id
 var myIFrame = document.getElementById(ifr_id);

 // Apply the property "contentWindow" to myIFrame object
 // In this way we get the iframe content
 var content = myIFrame.contentWindow.document.body.innerHTML;
 alert("Content: \n" + content); // Displays an Alert with the data from iframe
 
 // Define a new text that will replace the content of the iframe
 content = '<font color="blue">Text added with Javascript, from the main page</font>';

 // Modify the iframe content
 myIFrame.contentWindow.document.body.innerHTML = content;
}
</script>

<h3>Main page</h3>
<a href="#" onclick="get_iframe('ifr')">Retrieve /Modify IFrame</a><br><br>
<iframe src="ifr.htm" id="ifr" name="ifr"></iframe>
</body>
</html>

- This example will display the following result:

The main page

Retrieve /Modify IFrame

Content to be displayed in iframe ...
- When you click the link "Retrieve /Modify IFrame", the function "get_iframe()" will be called, that gets the content from the Iframe, and displays it in an Alert window, then sets a text to replace the iframe content. If you click again, it will retrieve and display the new content.

Another way to access the content of an iframe is to use the top.iframeName instruction. With this method you can access JavaScript variables and functions defined in the iframe with specified 'iframeName'.
This method is presented in the next tutorial, in which you will see how to get and modify the content of an IFrame by accessing a JS script that is created in another IFrame.

Daily Test with Code Example

HTML
CSS
JavaScript
PHP-MySQL
Which tag is used to add lists into <ul> and <ol> elements?
<dt> <dd> <li>
<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
Get and Modify content of an Iframe

Last accessed pages

  1. Contact page - CoursesWeb (10968)
  2. Tabs effect with CSS (11675)
  3. Making DIV Contents Scroll Horizontally, with multiple Div`s inside (17574)
  4. PhpSpreadsheet - Read, Write Excel and LibreOffice Calc files (15674)
  5. SHA512 Encrypt hash in JavaScript (12625)

Popular pages this month

  1. Making DIV Contents Scroll Horizontally, with multiple Div`s inside (1975)
  2. Contact page - CoursesWeb (1923)
  3. Tabs effect with CSS (1923)
  4. Insert, Select and Update NULL value in MySQL (1228)
  5. PHP getElementById and getElementsByTagName (722)