Loading Two or More Frames Simultaneously
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 /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
/a/12/pl.pl?art124
Question:
Did you find this article interesting and understandable? How can it be improved?
Your response is anonymous.
When done typing, click anywhere outside the box. [more info]
Will Bontrager
©2001 Bontrager Connection, LLC
Please note:
Articles on this website are presented "as is". However -
If you have a question about a CGI script, HTML, CSS, PHP, or JavaScript
Ask one of our Experts and you'll have your answer!
Click here for details.
