Links to Multiple Frames (Dynamic HTML: The Definitive Reference, 2nd Edition)

Dynamic HTML: The Definitive Reference, 2rd Ed.

5.3. Links to Multiple Frames

It is not uncommon for a navigation frame in a frameset to contain links or icons that must load documents into two or more other frames of the frameset at the same time. For a single frame, the standard HTML link facilities work fine, since they let you specify a target frame with nothing more than plain attributes. But the attribute technique doesn't do the job for controlling the content of multiple targets. Scripting comes to the rescue, with a few different ways to accomplish the same goal:

Invoke a function from the element's onclick event handler to control both frames
Use a javascript: pseudo-URL to invoke a function to control both frames
Use the default link for one frame and the onclick event handler for the other

The first two choices require defining a JavaScript function that loads the desired documents into their target frames. Such a function might look as follows:

function loadFrames( ) {
    parent.main.location.href = "section2.htm";
    parent.instrux.location.href = "instrux2.htm";
    return false;
}

You can then create a link that invokes the function for browsers with JavaScript turned on or that at least links to the main frame content if JavaScript is turned off:

<a href="section2.htm" target="main" onclick="return loadFrames( );">...</a>

The loadFrames( ) function returns false when it is done. This forces the onclick event handler to evaluate to return false, which preempts the actions of the href and target attributes (when JavaScript is turned on).

The javascript: pseudo-URL can be applied to a link's href attribute as follows:

<a href="javascript: void loadFrames( );">...</a>

Instead of navigating directly to a URL on the server, the link invokes whatever JavaScript function is named in the pseudo-URL. By including the void operator, you instruct the link to ignore any value returned by the function (the current page would be replaced by the text of that value), and thus leave the current page in place.

For the third approach, let the href and target attributes handle one frame while the onclick event handler takes care of the other with an inline script:

<a href="section2.htm" target="main" 
onclick="parent.instrux.location.href='instrux2.htm';">...</a>

Client-side image maps require a little more care because the onclick event handler isn't defined for the area object until the Version 4 browsers. But you can use the javascript: pseudo-URL trick with the href attribute inside a <map> tag.