7.3 Changing the Content of Multiple Frames at Once

NN 2, IE 3

7.3.1 Problem

You want a single button or hyperlink to change the content of two or more frames of the frameset.

7.3.2 Solution

Scripting is required for two frame changes at once. It is best to define a generalized function that performs the navigation, and invoke that function from an onclick event handler of a button or hyperlink. A function format that works for both interface elements is like the following:

function loadFrames(url1, url2) {
    parent.otherFrameName.location.href = url1;
    location.href = url2;
    return false;
}

The hyperlink tag that invokes this function looks as follows:

<a href="content12.html" target="content" onclick="return 
loadFrames('content12.html', 'navbar12.html')">...</a>

A default navigation path for the link is provided for those with scripting disabled.

7.3.3 Discussion

There are numerous variations on the solution script. Your choice depends on your design and the audience for the pages. Let's examine some other scenarios and alternate approaches.

As indicated in Recipe 5.10, your site design can allow for nonscripted access to be controlled strictly by the standard hyperlink href and target attributes, but a script-enhanced presentation takes advantage of the onclick event handler of the link to supplement or replace the default hyperlink action. You can even go so far as to have the default action navigate to one part of your web site, while the scripted action goes down an entirely different path suited to scriptable browsers.

The example shown in the Solution is tailored to a link that changes documents in both the current frame and one other. You aren't limited to this combination. If you'd rather keep the current frame intact (perhaps it is a static navigation bar), but multiple other frames are to be updated with each navigation bar click, change the references in the loadFrames( ) function to point to the desired frames in the order the URLs arrive from the event handler calls. When using hyperlinks as the user interface element, however, be sure to use the technique shown in the example so that the onclick event handler ultimately evaluates to return false to prevent the default link action from operating.

If access by nonscriptable browsers is a significant issue for your design, and you have a complex frameset consisting of several frames, you can still offer the equivalent of changing multiple frames, but do it for scriptable browsers more quickly. For nonscriptable browser users, you have to define a different framesetting document for each combination of frame content you offer from your navigation menu. Assign the framesetting document to the href attribute of a link, with the target pointing to the special _top window. Continue to use the loadFrames( ) function for the onclick event handler of the link:

<a href="frameset12.html" target="_top" onclick="return 
loadFrames('content12.html', 'navbar12.html')">...</a>

The advantage for the scriptable browser user is that the frames that don't have to change stay right where they are, and the browser doesn't have to compare the cache for those frames against the server's document. Thus, navigation is faster for scriptable browsers, but just as complete for nonscriptable browsers. This is the ideal value-added proposition that DHTML brings to a web page.

7.3.4 See Also

Recipe 7.2 for changing the content of one sibling frame.