Opening Multiple Frames Simultaneously

If you set up your web site using frames then you use the target attribute in your HTML to specify which frame that the new page is to open in. The href attribute specifies the page that is to be loaded into that frame.

So what do you do if you want a link to load new pages into two or more frames at the same time? Well there is no way to do it using HTML, you need to use Javascript. Since not everyone has a Javascript enabled browser you need to determine which is the main frame that needs updating when the link is selected so that at least that one page gets loaded when those lacking Javascript make the selection.

So how do we get Javascript to load separate pages to multiple frames at the same time. Quite simple really, all we do is to place the commands to load the appropriate page into the appropriate frames one after the other within out Javascript code. We can even make use of the HTML to load one of the frames for us so that we don't even need multiple commands where only two frames are to be loaded.

To make things clearer let's look at an example. Let's say that we have a frameset that contains three frames, one across the top of the screen named "header", one to contain the navigation down the left of the screen named "nav", and the third taking up most of the screen named "main". We have a link in the "nav" frame that is to load "page1.htm" into the "main" frame which we would also like to have load "page1nav.htm" into the "nav" frame provided that Javascript is supported. Here is our code.

THe loading of the "main" frame will take place regardless of whether the browser supports Javascript or not. If Javascript is supported then the onclick will load the appropriate page into the current frame ("nav") in addition.

Let's make it slightly more complicated by assuming that we would like "page1head.htm" to be loaded into the "header" frame as well - three frames in one link selection. Our code now looks like this:

<a href="page1.htm" target="main"
onclick="top.frames['header'].location.href
= 'page1head.htm'; self.location.href
= 'page1nav.htm';">page1</a>

All we have needed to do is to use Javascript to target the appropriate frames and load the required pages into them one after the other in the code. We also rely on the HTML to target the most important frame that we want loaded iven if Javascript is disabled. The commands will execute one after the other and the two or three pages will all start loading so quickly after one another that the frames will all appear to be loading simultaneously.