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 HTML5 tag defines marked text? (can be used to highlight parts of text)
<mark> <embed> <span>
<p>Free corses: <mark></mark> for Web Development.</p>
Which CSS pseudo-class adds a style to an element when the mouse is over it?
:focus :hover :active
a:hover {
  font-weight: bold;
  color: #00da01;
Click on the function which returns a string value that represents the number rounded to the x digits after the decimal point.
toPrecision(x) toFixed(x) floor(x)
var num = 12.34567;
num = num.toFixed(2);
alert(num);       // 12.35
Indicate the PHP function which reads an entire file into an array.
[) file() readfile()
$arr = file("a_file.txt", FILE_IGNORE_NEW_LINES | FILE_SKIP_EMPTY_LINES);
Frame - IFrame object

Last accessed pages

  1. Get Duration of Audio /Video file before Upload (5913)
  2. Follow the mouse cursor with a DIV inside a Parent (2703)
  3. Register and show online users and visitors (23278)
  4. Node.js Move and Copy Directory (1127)
  5. SHA1 Encrypt data in JavaScript (8256)

Popular pages this month

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