Loading Two or More Frames Simultaneously

Loading Two or More Frames Simultaneously
by
Mari Bontrager

Permission is granted to reprint this article in its entirety, provided no reprints are sent in conjunction with unsolicited bulk email, provided no fee or other value is exchanged, provided no changes are made to the article, and provided the author's name, signature lines, and copyright line are printed with the article; except you may change the article's title.

When you have a framed site and want to load content into two or more frames when only one link is clicked, JavaScript can be used to accomplish it.

It works by having JavaScript in one frame load another frame. There are two methods:

The page loaded into a frame contains JavaScript that loads another frame. The page in the second frame contains JavaSript that loads a third frame. And so forth. We'll call this the Cascade Method.
The JavaScript of the first page loaded into a frame loads all the other frames that need loading. We'll call this the Simultaneous Method.

Some reasons for updating several frames simultaneously include:

One frame has a synopsis, another has a complete description, and a third frame has a photograph. When a link is clicked, all three frames must update.
When a theater's offerings are viewed in one frame, a location map displays in another frame.
A specific category of banners rotates in one frame depending on the content displayed in the other.

Credit goes to Shelley Lowery of http://web-source.net/ for helping with polishing this technique. It was first developed for inclusion in future versions of her "Ebook Starter" ebook templates.

The rest of this article contains details of how to do it. If you prefer, you can go straight to the demonstration page and download a complete set of working examples. It's at http://willmaster.com/a/12/pl.pl?art124

For this article, we'll use the following frameset to generate four frames, 3 columns with the rightmost column divided into two rows:

<html>
<frameset cols="150,*,200">
   <frame src="nav.html" name="navigation">
   <frame src="main1.html" name="main">
   <frameset rows="50%,50%">
      <frame src="t_right1.html" name="topright">
      <frame src="b_right1.html" name="bottomright">
   </frameset>
</frameset>
</html>

The above will create a page with the default pages in the four frames.

The Cascade Method

The navigation page has standard HTML links, with target="main". Example:

<a href="main2.html" target="main">First Example</a>

When the above link is clicked, main2.html is loaded into the main frame. The source code of main2.html contains JavaScript that loads t_right2.html into the topright frame. The JavaScript is

<script type="text/javascript" language="JavaScript"><!--
parent.topright.document.location="t_right2.html";
//--></script>

t_right2.html contains some JavaScript, too. Its JavaScript loads b_right2.html into the bottomright frame:

<script type="text/javascript" language="JavaScript"><!--
parent.bottomright.document.location="b_right2.html";
//--></script>

Thus, with one click on a link, three frames are loaded in cascade.

The Simultaneous Method

Another method of loading more than one frame with a single click on a link is to have the first page loaded into a frame contain JavaScript that loads all the other frames that need loading, all at once. The navigation page might have a link like

<a href="main3.html" target="main">

which loads main3.html into the main frame. The JavaScript in the source code of main3.html (1) loads t_right3.html into the topright frame and (2) loads b_right3.html into the bottomright frame. The JavaScript is

<script type="text/javascript" language="JavaScript"><!--
parent.topright.document.location="t_right3.html";
parent.bottomright.document.location="b_right3.html";
//--></script>

Again, with one click on a link, three frames are loaded.

A demonstration of both methods is at http://willmaster.com/a/12/pl.pl?art124

By: Will Bontrager

Copyright 2001 Bontrager Connection, LLC
http://willmaster.com/possibilities/
subscribe-possibilities@willmaster.com