HTML Tutorial
Advanced Web Design: Frames - Page 5 of 5
How To Change Two Frames With One Click 

You want to change more than one frame at a time? Well, this tutorial will tell you how to do just that. Note that this tutorial uses JavaScript.

The first thing you will need is a frameset to get you started. For simplicity, I will use a frameset with two frames. Here is the code for the frameset page: 


<HTML>
<HEAD>
<TITLE>Frames Example 5</TITLE>
</HEAD>
<FRAMESET cols="20%,80%">
<FRAME SRC="page1.htm" name="left_frame">
<FRAME SRC="page2.htm" name="right_frame">
</FRAMESET>
</HTML>

Be sure you give each frame a name using the name=" " attribute. I named the frames above "left_frame" and "right_frame".

Now, create html files for each frame you will need to use. Since I have two frames, and want to change both frames at once, I need 4 html files. I called mine "page1.htm", "page2.htm", "page3.htm", and "page4.htm".

Now, since I am using the left frame for my navigation, that is where I am going to put the link to change the two frames. The html page for the right frame does not need to be modified at all, unless you just want to....

Edit the Left Frame HTML

Now, to make this work, we need to edit the html page that makes the left frame. In this case, the left frame is "page1.htm". So this is the file we need to work on. Here is what we need to have in the html code to get the link to change multiple frames: 
                  

<HTML>
<HEAD>
<TITLE>FRAME 10</TITLE>
<SCRIPT language="JavaScript">
<!----hide
function change2()
{
parent.left_frame.location="page3.htm";
parent.right_frame.location="page4.htm";
}
//------>
</SCRIPT>
</HEAD>

<BODY bgcolor="#FFFFFF" text="#000000">
<CENTER>
Click the link below to change both frames.
<BR>
<A HREF="javascript:change2()">Change 2 Frames</A>
</CENTER>
</BODY>
</HTML>
The JavaScript Function!

Don't worry, the javascript isn't as bad as it seems. You can copy all of it straight from this page. The important lines are:

parent.left_frame.location="page3.htm";
parent.right_frame.location="page4.htm";

That is where you tell the browser what html pages you want to change both frames to, and where you use the frame names we gave our frames earlier. In general, it would look like this:

parent.your_frame_name.location="url";
parent.your_other_frame_name.location="url";

Replace your_frame_name with the name of your frame from earlier. Replace url with the web address of the page you want to change to. Mine was named "left_frame", and I wanted to change the page to "page3.htm", so I got the line:

parent.left_frame.location="page3.htm";

Do the same for the second frame. My other frame was named "right_frame" and I wanted to change to "page4.htm":

parent.right_frame.location="page4.htm";

That's the only part of the script you really have to edit. If you used the same names and pages I did, you didn't need to edit at all. As far as the url goes, you can also use a full url if the page you want to link to is not in your directory. You could have something like this:

parent.left_frame.location="http://www.someplace.com/somepage.htm";

What's With the Link Tag?

< A HREF="javascript:change2()">Change 2 Frames</A>

You probably also noticed that the link tag does not link to a normal url. This is because it is calling our javascript function, which is what we are using to change the urls. This is why we can change two at the same time. If you want more information on how the javascript link works, I will explain later in my Javascript tutorials

Give it a Try

To see the code in action, click the link below for a sample page:

Example Page

In the example, you probably saw that I had a link to change the frames back again. If you want to add a link like that, you will need to edit the second left frame's html code. In my example, it would be "page3.htm" that you would need to edit. You can add the same script and code, but change the urls in the javascrpt function to lead back to your first two frames. I wanted to go back to "page1.htm" and "page2.htm". My example code for the url change looked like this:

parent.left_frame.location="page1.htm";
parent.right_frame.location="page2.htm";

Now, give it a try yourself. If you are using frames, this may be a handy trick for you sometime.

[Back to the Stage 3 Index]