Ordinary Frame Examples

These simple examples show how to organize and use frames without using JavaScript.

frameSet1.html (Side-by-side frames)

This is the simplest case. There is a left frame and a right frame. Here is the HTML in frameSet1.html that defines the frameset.

<frameset cols="30%,70%">
   <frame src = "left.html" name = "left">
   <frame src = "right.html" name = "right">
</frameset>
In a frameset document there is no <body> element. Each frame is given a name and a page to load into the frame.

frameSet2.html (Side-by-side frames)

This is similar to the first example except the left frame is a table of links. When a link is clicked the corresponding page is loaded into the right frame. Here is the HTML in frameSet2.html that defines the frameset.

<frameset cols="15%,70%">
   <frame src = "links.html" name = "links">
   <frame src = "content.html" name = "content">
</frameset>
The file links.html will contain thepage of links and the default page content.html in the right frame will be replaced by a new page when a link is clicked. Here is the body of links.html
<a href="http://www.cnn.com" target = "content">CNN</a>
<p>
<a href="http://www.canoe.ca" target = "content">Canoe</a>
<p>
<a href="http://www.javascript.com" target = "content">JavaScript site</a>
The target attribute is used to specify which frame in the frameset will be loaded with the page.

frameSet3.html (frames within frames)

This example shows that a frame set can be nested inside another frame set. Here there is a top frame a middle frame and a bottom frame. The middle frame is divided into two side-by-side frames. Here is the HTML in frameSet3.html that defines the frameset.

<frameset rows="10%,*,10%">
   <frame src = "top.html" name = "links" scrolling = no>
   <frameset cols="10%,*">
      <frame src = "left.html" name = "left">
      <frame src = "right.html" name = "right">
   </frameset>
   <frame src = "bottom.html" name = "bottom" scrolling = no>
</frameset>
It is also shown how the scrolling attribute can be used to prevent a frame from scrolling. No scroll bars will appear. There are several other attributes for the frame and frameset elements (see HTML documentation).

JavaScript Frame Examples

frameSet4.html (mouse over links)

In the frameSet2 example it is necessary to click on the links in the links.html page. We can rewrite this example using JavaScript so that it is only necessary to move the mouse over the link in order to follow it. Here is the HTML in frameSet4.html that defines the frameset.

<frameset rows="10%,*,10%">
   <frame src = "top.html" name = "links" scrolling = no>
   <frameset cols="10%,*">
      <frame src = "left2.html" name = "left">
      <frame src = "right.html" name = "right">
   </frameset>
   <frame src = "bottom.html" name = "bottom" scrolling = no>
</frameset>
Here is the body of the links2.html file
<a href="#" onMouseOver="goTo('http://www.cnn.com')">CNN</a>
<p>
<a href="#" onMouseOver="goTo('http://www.canoe.ca')">Canoe</a>
<p>
<a href="#" onMouseOver="goTo('http://www.javascript.com')">JavaScript site</a>
The goTo function in the head is given by
function goTo(theUrl)
{
   parent.content.location = theUrl;
}
Here we find the parent frame and replace its location by the given url.

A multiple choice quiz

The file quizFrames.html contains a frame set with two frames:

<frameset cols="100%,*">
   <frame src = "page1.html" name = "page" noresize>
   <frame src = "statistics.html" name = "statistics" noresize>
</frameset>
The left frame initially contains page1.html, the first of questions. In this example page2.html is the last page. It contains one more questions and an evaluate button the user can press to obtain the score.

The right frame is statistics.html and it is hidden because it has zero width. It should be given a name that a user cannot guess (like a password) since it contains arrays with he correct answer and the user answer for each question.