Previous
Image Control 
Next
Multiple Frames 
Advanced JavaScript Tutorial
Frames

Frames

"Don't use frames." is an oft repeated advice in web developing. The disadvantages of using frames are many...

But one could use frames in web designing if the designer gives a no-frame alternative for the site. www.quirksmode.org is a good example of how to do this. That said, let us continue with our tutorial.

If you still want to use frames even after my warnings, these javascript codes will help interaction between frames. First let's see what a frame is...

HTML frames allow authors to present documents in multiple views, which may be independent windows or subwindows. Multiple views offer designers a way to keep certain information visible, while other views are scrolled or replaced. For example, within the same window, one frame might display a static banner, a second a navigation menu, and a third the main document that can be scrolled though or replaced by navigating in the second frame.

The code for creating a simple three pages frameset is given below.

<HTML>
<HEAD>
<TITLE>A simple frameset document</TITLE>
</HEAD>
<FRAMESET cols="20%, 80%">
  <FRAMESET rows="100, 200">
      <FRAME src="frame1.html">
      <FRAME src="frame2.html">
  </FRAMESET>
  <FRAME src="frame3.html">
  <NOFRAMES>
      <P>This frameset document contains:
      <UL>
         <LI><A href="frame1.php">Some neat contents</A>
         <LI><A href="frame2.php">Some more neat contents</A>
         <LI><A href="frame3.php">Some other neat contents</A>
      </UL>
  </NOFRAMES>
</FRAMESET>
</HTML>

that might create a frame layout something like this:

+---------+-----------------------------+
|         |                             |
|         |                             |
| frame1  |                             |
|         |                             |
|         |                             |
|---------|                             |
|         |          frame3             |
|         |                             |
|         |                             |
|         |                             |
| frame2  |                             |
|         |                             |
|         |                             |
|         |                             |
|         |                             |
+---------+-----------------------------+

I cannot put frames in this page without totally messing up the layout. So I put the frames in another page. Click here to open a new window with the frames page.

The Frame Tree of the above sample will be something like...

           top
            |
  +---------+---------+
  |         |         |
frame1    frame2    frame3

We have to use this tree structure while accessing individual frames. So if I want to access frame2, I will use the code top.frame2.document.<whatever>

For example we need to change the picture of a image that has the name 'img' in frame1

top.frame1.document.img.src = "images/roll2.gif"

Or we want to know the location of the image in frame1

alert("The Image's src is " + top.frame1.document.img.src)

One can also access the functions of a frame by

top.frame2.functionName()

The page inside a frame can be changed using this code

top.frame2.location.href = "page.html"

This will load the file called 'page.html' into the frame by the name of 'frame2'.

In the case of Iframes, we have to follow another rule. First, lets make a iframe.

<iframe src="frames/iframe.php" name="frame_name"
width="400" height="250"></iframe>

We don't have to use the 'top.frame_name.' code in the case of iframes. A simple frames['frame_name'] will do just fine. For example, let us change an image...

frames['frame_name'].document.images['img'].src = "../images/roll2.gif"

Other than this change everything else will use the same code as frames.

frames['frame_name'].location.href = "frames/frame2.php"

Try it out...

Previous
Image Control 
Next
Multiple Frames 
Contents
blog comments powered by Disqus