HTMLisEasy.com
HTML tutorials for the rest of us...

 Load 2 (or more) frames with one click - Javascript method 

Here is an example.

First we need a few target documents. grab the following and save them in your working folder.

joe_bill.html
joe_ed.html
joe_frank.html
joe_tom.html
   jackie_amy.html
jackie_joan.html
jackie_lisa.html
jackie_toni.html
john_al.html
john_dean.html
john_george.html
john_ralph.html
   jenny_denise.html
jenny_marci.html
jenny_pam.html
jenny_shannon.html

First we'll build the smaller example. You need a master page that specifies what goes where to begin with. Save the following as master.html...

<html>
<head>
<title>Joe and Jackie's friends</title>
</head>

<frameset cols="25%,75%">
  <frame src="dir.html">
  <frameset rows="50%,50%">
    <frame src="joe_bill.html" name="right_top">
    <frame src="joe_ed.html" name="right_bottom">
  </frameset>
</frameset>

</html>

This is just simple HTML frame stuff so far. Notice the frame names. (We haven't made dir.html yet).

Save the following as dir.html....

<html>
<head>
<title></title>
</head>
<body>

</body>
</html>

Add some scripting to the HEAD...

<html>
<head>
<title></title>
<script type="text/javascript">

function multiLoad2(doc1,doc2)
{
   parent.right_top.location.href = doc1;
   parent.right_bottom.location.href = doc2;
}

</script>
</head>
<body>

</body>
</html>

No need to worry about what it does just yet.

Add the text of the links and the anchor tags. Just don't fill in the HREF part just yet.

<html>
<head>
<title></title>
<script type="text/javascript">

function multiLoad2(doc1,doc2)
{
   parent.right_top.location.href = doc1;
   parent.right_bottom.location.href = doc2;
}

</script>
</head>
<body>
<p><a href="">Joe's friends</a></p>
<p><a href="">Jackie's friends</a></p>
</body>
</html>

Now add the HREF part.

<html>
<head>
<title></title>
<script type="text/javascript">

function multiLoad2(doc1,doc2)
{
   parent.right_top.location.href = doc1;
   parent.right_bottom.location.href = doc2;
}

</script>
</head>
<body>
<p><a href="javascript:multiLoad2('joe_bill.html', 'joe_ed.html')">Joe's friends</a></p>
<p><a href="javascript:multiLoad2('jackie_amy.html', 'jackie_joan.html')">Jackie's friends</a></p>
</body>
</html>

Now load master.html and your example should be functional.

All right, what have we done? How does it work?

In a nutshell, we have a function - multiLoad2(). We pass arguments to the function - joe_bill.html and joe_ed.html. The function then processes those arguments.

function multiLoad2(doc1,doc2)
Here two arguments get passed to the function. As soon as the arguments hit the function, they become variables doc1 & doc2 so they can be manipulated.

parent.right_top.location.href = doc1;
Place whatever is in variable doc1 in the right top frame.

parent.right_bottom.location.href = doc2;
Place whatever is in variable doc2 in the right bottom frame.

You could easily expand on this to change more frames. Add to master.html and save it as master2.html...

<html>
<head>
<title>Joe and Jackie's friends</title>
</head>

<frameset cols="25%,75%">
  <frame src="dir2.html">
  <frameset rows="25%,25%,25%,25%">
    <frame src="joe_bill.html" name="right1">
    <frame src="joe_ed.html" name="right2">
    <frame src="joe_frank.html" name="right3">
    <frame src="joe_tom.html" name="right4">
  </frameset>
</frameset>

</html>

(Don't forget the the change from dir.html to dir2.html. We're going to use a different directory page.)

Now add to your original dir.html and save as dir2.html...

<html>
<head>
<title></title>
<script type="text/javascript">

function multiLoad4(doc1,doc2,doc3,doc4)
{
   parent.right1.location.href = doc1;
   parent.right2.location.href = doc2;
   parent.right3.location.href = doc3;
   parent.right4.location.href = doc4;
}

</script>
</head>
<body>
<p><a href="javascript:multiLoad4('joe_bill.html',     'joe_ed.html',      'joe_frank.html',   'joe_tom.html'      )">Joe's friends</a></p>
<p><a href="javascript:multiLoad4('jackie_amy.html',   'jackie_joan.html', 'jackie_lisa.html', 'jackie_toni.html'  )">Jackie's friends</a></p>
<p><a href="javascript:multiLoad4('john_al.html',      'john_dean.html',   'john_george.html', 'john_ralph.html'   )">John's friends</a></p>
<p><a href="javascript:multiLoad4('jenny_denise.html', 'jenny_marci.html', 'jenny_pam.html',   'jenny_shannon.html')">Jenny's friends</a></p>
</body>
</html>

Now load master2.html to test your creation.

A little fiddling with this setup and you'll see how it could be very powerful. The tying together of the 2-frame JS version and the 4-frame JS version I'll leave up to you. As far as the random load thing, that's a little beyond the scope of this piece. I just added it in so you could see the potential of javascript based frame manipulation.

And so we wrap up the second method for changing multiple frames with one click. As I've said before, if at all possible, use the HTML method for this.

<< Back to the HTML method

Frames Tutor
Lessons: Intro 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19
Frames Templates      HTML 4.0 Reference      Barebones HTML Guide