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 tag adds an image in web page?
<div> <img> <span>
<img src="" width="191" height="63" alt="Courses-Web" />
Which of these CSS codes displays the text oblique?
font-style: italic; text-decoration: underline; font-weight: 500;
#id {
  font-style: italic;
Click on the jQuery function used to hide with animation a HTML element.
click() hide() show()
$(document).ready(function() {
  $(".a_class").click(function(){ $(this).hide("slow"); });
Click on the correctly defined function in PHP.
fname function() {} function fname() {} function $fname() {};
function fname($a, $b) {
  echo $a * $b;
Frame - IFrame object

Last accessed pages

  1. Raccoon's Break Out (492)
  2. Linebacker Alley (1662)
  3. Bubbles3 (52209)
  4. PhpSpreadsheet - Read, Write Excel and LibreOffice Calc files (6874)
  5. Clear Canvas Context (4103)

Popular pages this month

  1. Flash Games - Free online Games (1941)
  2. Qwop (1477)
  3. Courses Web: PHP-MySQL JavaScript Ajax HTML CSS Flash-AS3 (1338)
  4. Tunnel Rush (1259)
  5. Drag Racer V3 (979)