Links to Multiple Frames

It is not uncommon for the navigation bar 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.instructions.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 return false as well, which preempts the actions of the HREF and TARGET attributes (when JavaScript is turned on). ...

Get Dynamic HTML: The Definitive Reference now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.