Tutorial 8: Designing a Web Site with Frames

Blocking Unwanted Frames

One of the problems with frames is that your Web site can be stuck inside the frames of another site. This can make it appear (erroneously) that your Web site is part of that frame. You can jump your Web page out of an external frame by placing the following script into the head section of your document:

<script language="text/javascript">

if (top.location.href != self.location.href) {

top.location.href = self.location.href;

}

</script>

When the browser opens your page, it checks to see whether it is in the top location. If your page has been placed within a frame, it will jump out of the frame and replace it.

Forcing a Page into a Frameset

Another problem that may occur with frames is a Web page that should only be viewed within the context of the frameset and not as a standalone page. You can force the browser to always display your page within its frameset by adding the following script to the head section of your document:

<script language="text/javascript">

if (top.location.href == self.location){

top.location.href="frame.htm";

}

</script>

where frame.htm is the filename of the frame file in which you want to display your page.

Opening Multiple Frames

When you click a link within a frameset, you can load a document into only one frame. If you want to load documents into two or more frames, you can do so by nesting the frames. Suppose for example, you have the following frameset:

<frameset rows="2">

<frameset cols="3">

<frame name="a" />

<frame name="b" src="docB.htm" />

<frame name="c" src="docC.htm" />

</frameset>

</frameset>

and you want to have two documents opening in frames b and c when you click a link in frame a. You can do this by creating a file containing the frame b and frame c frameset only. The file, which we'll call docBC.htm would look as follows:

<frameset rows="2">

<frame name="b" src="docB.htm" />

<frame name="c" src="docC.htm" />

</frameset>

Then we place this frame file in the original frameset:

<frameset rows="2">

<frameset cols="2">

<frame name="a" />

<frame name="b" src="docB.htm" />

</frameset>

</frameset>

The two columns of frames in the docBC.htm will blend in with the first frame column a, appearing as if there were three columns of frames, not two. However, you can then update the contents of the second and third frame columns by opening a new two-frame file, such as newBC.htm:

<frameset cols="2>

<frame name="b" src="newB.htm" />

<frame name="c" src="newC.htm" />

</frameset>

By nesting frame files within each other, you can create several interesting effects as multiple frames are opening by clicking a single link.