Index
 

Change multiple frames
with one single mouseclick.

In many cases, framesets are used in such a way that one frame contains a Table of Contents (TOC) and another frame the actual information. In these cases you might want to click on one single link to achieve the simultaneous loading of a new TOC in one frame, and an new introduction page in another. HTML itself does not have this option, but with a little piece of JavaScript we can achieve this effect. As is the case so often, there are many ways to get this job done, but we will discuss only two of them here.
 

Example.  

Here on the left there is a link to an example in which we will see three frames, called "banner", "toc" and "content". The banner frame allways cantains the same banner page, the toc frame is for the apropriate Tables of Contents, and the content frame is meant for the actual information (content) of the site.

When a new page is loaded in the toc frame, the corresponding introduction page must be loaded in the content frame. To achieve this, we only have to add one single line of JavaScript to the page we load in the toc frame. 

<script language="javascript">
<!-- 
    parent.content.location.href ="ch1intro.htm";
//-->
</script>

What this script does is simply setting the location property of the content frame to the proper URL. (in this case ch1intro.htm.)

The script above will probably also be present in the page that is initially loaded in the toc frame. Therefore method above is rather crude, and when someone is loading your frameset via a slow link, he is likely to get a JavaScript error. This can be caused by the fact that the page for the toc frame is received before the frameset is loaded on the screen. This means that the script will start running before the page is loaded in the toc frame. At that moment in time there does not exist someting like parent.content (or parent.frame[x]). To make sure that the script does not start running before the page is loaded in the toc frame, we can make this line of JavaScript a function, and then use the onLoad event of the page to trigger the script. This onLoad event does not take place before the page is loaded in the proper frame, so now we know for sure that the content frame exists when the script starts running. An example of this is below. 

<html>
<head>
<title>Table of Contents.</title>

<script language="javascript">
<!-- 
function load(url)
{
    parent.content.location.href = url;
}
//-->
</script>

</head>
<body onload=load('ch1intro.htm')>

Whatever text there may be on the toc page.

</body>
</html>

The function in the example above can be copied one-to-one in any toc page. The URL of the page that has to be loaded in the content frame is forwarded as a parameter in the function call. What will happen now is that as soon as the page in the toc frame is loaded, the onLoad event takes place. This triggers the call to the function load(), with the URL of the page that has to be loaded in the content frame as a parameter. Because this now happens when the toc page is loaded in the frame, we know for sure that the content frame also exists when the function starts.

hints

If you have organized your site into different directories and subdirectories, it can be wise to enter the specification of the page that has to be loaded in the content frame, relative to the root of your site, like: 

<body onload=load('/dir/sub-dir/ch1intro.htm')>

The reason for this is that the location.href property of the content frame is changed. Whatever you enter as a parameter is relative to the URL of the page that is currently displayed in the toc frame. Because you can not predict which page this is when the visitor of your site clicks the link, it is a better idea to make the URL relative to a fixed reference, like the root of your web.

 

Example.  

A different approach.

A different approach to deal with this, is to not have the link pointing to the new page in the toc frame, but to a little peace of JavaScript instead. This JavaScript can load different pages in different frames. In fact you can change the pages in as many frames (concurrently) as you like. In the example below, we not only change the bottom two frames, but also the banner frame.
    
<HTML>
<HEAD>
<TITLE>Link Pagina</TITLE>

<SCRIPT LANGUAGE="JavaScript">
<!-- Hide from tired old browsers

function multiLoad(pag1,pag2,pag3)
{
    parent.banner.location.href=pag1;
    parent.toc.location.href=pag2;
    parent.content.location.href=pag3;
}
// -->
</SCRIPT>
</HEAD>

<BODY bgcolor="#FFFFFF">
<H3>Inhoudsopgave</H3>

<ul>
  <li><A HREF="javascript:multiLoad('ch1ban.htm', 'ch1toc.htm', 'ch1intro.htm')">Hoofdstuk 1</A></li>
  <li><A HREF="javascript:multiLoad('ch2ban.htm', 'ch2toc.htm', 'ch2intro.htm')">Hoofdstuk 2</A></li>
  <li><A HREF="javascript:multiLoad('ch3ban.htm', 'ch3toc.htm', 'ch3intro.htm')">Hoofdstuk 3</A></li>
</ul>

</BODY>
</HTML>
   

What we have up here, is the page that is initially loaded in the toc frame. When we click on one of the links here, we want to load the proper banner in the banner frame, the proper table of contents in the toc frame and the corresponding introduction page in the contents frame. To achive this, the links do not directly point to the page, but to the JavaScript fuction multiLoad() instead. As parameters we enter the URL's of the pages that must be loaded in the various frames. Of cource it is of paramount importance that these parameters are passed in the proper order. The parameters enter the JavaScript function in the same sequence they ware entered in the function call. Wat the function does is changing the location.href property of the various frames to whatever is entered in the parameter.

The toc pages that belong to the different chapters function in the same way. Everytime a link points to a different chapter, the function multiLoad() is called. The links to the different parts of the same chapter are normal hyperlinks that load the proper page in the content frame.

 

Top
Last change on April 26th 2000.