Load 2 (or more) frames with one click - Javascript method
First we need a few target documents. grab the following and save them in your working folder.
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.
| 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 |
|
|
|
|
