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.

zjoe_bill.html
zjoe_ed.html
zjoe_frank.html
zjoe_tom.html
      zjackie_amy.html
zjackie_joan.html
zjackie_lisa.html
zjackie_toni.html
zjohn_al.html
zjohn_dean.html
zjohn_george.html
zjohn_ralph.html
      zjenny_denise.html
zjenny_marci.html
zjenny_pam.html
zjenny_shannon.html

By the way, these all begin with z so they all stay together in the directory and are easy to grab all at once.

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="zjoe_bill.html" NAME="right_top">
    <FRAME SRC="zjoe_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 BGCOLOR="#FFFFFF">

</BODY>
</HTML>

Add some scripting to the HEAD...

<HTML>
<HEAD>
<TITLE></TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!-- Hiding
function multiLoad2(doc1,doc2) {
  parent.right_top.location.href=doc1;
  parent.right_bottom.location.href=doc2;
}
// -->
</SCRIPT>
</HEAD>
<BODY BGCOLOR="#FFFFFF">

</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 LANGUAGE="JavaScript">
<!-- Hiding
function multiLoad2(doc1,doc2) {
  parent.right_top.location.href=doc1;
  parent.right_bottom.location.href=doc2;
}
// -->
</SCRIPT>
</HEAD>
<BODY BGCOLOR="#FFFFFF">
<P><A HREF="">Joe's friends</A>
<P><A HREF="">Jackie's friends</A>
</BODY>
</HTML>

Now add the HREF part.

<HTML>
<HEAD>
<TITLE></TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!-- Hiding
function multiLoad2(doc1,doc2) {
  parent.right_top.location.href=doc1;
  parent.right_bottom.location.href=doc2;
}
// -->
</SCRIPT>
</HEAD>
<BODY BGCOLOR="#FFFFFF">
<P><A HREF="javascript:multiLoad2('zjoe_bill.html', 'zjoe_ed.html')">Joe's friends</A>
<P><A HREF="javascript:multiLoad2('zjackie_amy.html', 'zjackie_joan.html')">Jackie's friends</A>
</BODY>
</HTML>

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

Alright, what have we done? How does it work?

In a nutshell, we have a function - multiLoad2(). We pass arguments to the function - zjoe_bill.html and zjoe_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="zjoe_bill.html" NAME="right1">
    <FRAME SRC="zjoe_ed.html" NAME="right2">
    <FRAME SRC="zjoe_frank.html" NAME="right3">
    <FRAME SRC="zjoe_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 LANGUAGE="JavaScript">
<!-- Hiding
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 BGCOLOR="#FFFFFF">
<P><A HREF="javascript:multiLoad4('zjoe_bill.html',     'zjoe_ed.html',      'zjoe_frank.html',   'zjoe_tom.html'      )">Joe's friends</A>
<P><A HREF="javascript:multiLoad4('zjackie_amy.html',   'zjackie_joan.html', 'zjackie_lisa.html', 'zjackie_toni.html'  )">Jackie's friends</A>
<P><A HREF="javascript:multiLoad4('zjohn_al.html',      'zjohn_dean.html',   'zjohn_george.html', 'zjohn_ralph.html'   )">John's friends</A>
<P><A HREF="javascript:multiLoad4('zjenny_denise.html', 'zjenny_marci.html', 'zjenny_pam.html',   'zjenny_shannon.html')">Jenny's friends</A>
</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.