Frames and IFrames are used for displaying multiple HTML documents in the same browser window. The frame object and iframe object correspond to the HTML element of the same name.
To create frames, you can use the fallowing HTML tags:

<frameset> with <frame> , or just <iframe>
- An example of HTML code that creates a page with two frames:
<frameset rows="50%,50%">
  <frame src="pagina1.html" name="frame1">
  <frame src="pagina2.html" name="frame2">
- Or, with IFrame:
<iframe src="page_url" width="600" height="200" align="center" scrolling="yes" frameborder="0" name="name_frame"> </iframe>
- More detail abaut HTML and Frames you can find at the lesson Using Frames.

1. JavaScript and Frame / IFrame object

For each <frame> tag in an HTML document, JavaScript creates a Frame object.
For each <iframe> tag in an HTML document, JS creates a IFrame object.

Frameset object properties

The HTML frameset element holds two or more frame elements. Framesets define the layout of frames in the window. Each frameset contains a set of rows or columns. - In the <frameset> can be used the onload event, it specifies a JavaScript code to be executed immediately after the page is loaded.

Frame and IFrame object properties

• All frame / iframe elements are stored in a frame array.
You can acces an frame/iframe using its index in the array or using the value of the name attribute or its ID (with document.getElementById()).
- This example displays an Alert with the values of "src", "height" and "width" attributes of an iframe.
<iframe src="page.html" width="600" height="200" align="center" scrolling="yes" frameborder="0" name="ifr_name" id="ifr1"> </iframe>
<script type="text/javascript"><!--
var ifr_src = top.document.getElementById('ifr1').src;
var ifr_hgh = top.document.getElementById('ifr1').height;
var ifr_wth = top.document.getElementById('ifr1').width;

alert("src: "+ ifr_src+ "\n Height: "+ ifr_hgh+ "\n Width: "+ifr_wth);

The fallowing example shows how you can acces the Document object of a iframe, using frames array, its name and id.
- The contents of a document can be accessed from another document only if the two documents are located in the same domain.
<script type="text/javascript"><!--
var ifr = top.iframe_name.document;
// or
var ifr = top.frames[0].document;
// or
var ifr = top.frames['iframe_name'].document;
// or, using the getElementById
var ifr = top.document.getElementById('dd').contentWindow.document;    // For IE, version 7-
var ifr = top.document.getElementById('dd').contentDocument            // IE 8+ and others
- When moving up the chain toward the parent from a frame/iframe, you can use one of parent or top keyword.
- top refers to the top - most window object in the hierarchy, while parent means the immediate owner window.

2. Frame navigation

With the names of the frames we can exchange information between two frames, throught the main window, for example, we can make a link in a iframe to open a page in another iframe.
Next we will study three cases of relationships and visits between iframes and main window.

  1) The main window accessing an iframe
If you have a script in the parent window, to access the iframe, just use the name of the iframe.
For example:
frame1.document.write("Message from parent window");
- The text will be write in the frame1 page.

  2) The iframe accessing the main window
If we have the JS script in an iframe, and we want that script to access elements of main window, we use the top keyword in the script inside iframe.
For example:
top.document.write("Message from iframe")
- The text will be write in the main window.

  3) The iframe accessing another iframe
If we have the JS script in an iframe (iframe1), and we want that script to access another iframe elements (iframe2), we use the top keyword and the name of the second iframe.
For example:
top.iframe2.document.write("Message from iframe1")
- The text will be write in the iframe2 page.

• If you want to change the contents of a iframe (named "iframe1") from main window or from another iframe, you could create a link like this:
<a href= "newtpage.html" target="iframe1">New Page</a>
- Or, using JavaScript:
<a href= "javascript:top.right_side.location='newpage.html'">New Page</a>

Daily Test with Code Example

Which meta tag provides a short description of the page?
<meta content="..."> <meta description="..."> <meta http-equiv="...">
<meta name="description" content="70-160 characters that describes the content of the page" />
Which CSS property is used to stop the wrapping effect of the "float"?
clear text-align position
#some_id {
  clear: both;
Click on the method which gets an array with all the elements in the document that have a specified tag name.
getElementsByName() getElementById() getElementsByTagName()
var divs = document.getElementsByTagName("div");
var nr_divs = divs.length;
Indicate the PHP function which returns the number of elements in array.
is_[) count() strlen()
$arr =[7, 8, "abc", 10);
$nri = count($arr);
echo $nri;        // 4
Frame - IFrame object

Last accessed pages

  1. Images and Audio Uploader addon for CKEditor (2959)
  2. PHP OOP - Interfaces (2511)
  3. AJAX Course, free Lessons (7047)
  4. Convert XML to JSON in PHP (7893)
  5. PHP PDO - Select query, fetch (20327)

Popular pages this month

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