JavaScript and Frames, Part I: Controlling Multiple Frames - www.docjavascript.com | WebReference

JavaScript and Frames, Part I: Controlling Multiple Frames - www.docjavascript.com


JavaScript and Frames, Part I (4)

Controlling Multiple Frames

One of the capabilities of frame sets is the ability to control multiple frames from a single frame. There are two basic ways to do it. The first one is a combination of an HREF and an event handler assignment:

<A HREF="frame4new.html" TARGET="bottomrow"
onClick="parent.frames[1].location.href = 'frame4new.html';
return true;">Multiple Load #1</A>

In this example, we first load frame4new.html (HREF="frame4new.html") at the bottom row frame (TARGET="bottomrow"). Then, we use the onClick event handler to load the file frame4new.html in frame no. 1:

onClick="parent.frames[1].location.href = 'frame4new.html';

The second approach is to include all operations in the HREF's javascript: URL:

<A HREF="javascript:void(parent.frames[1].location.href='frame4new.html');
void(parent.frames[2].location.href='frame4new.html');">Multiple Load #2</A>

Here we assign frame4new.html to both frame 1 and frame 2. Although this technique doesn't degrade as well as the first for non-javascript enabled browsers, it is more straight-forward. Familiar yourself with the javascript: URL and its usage. We have covered this subject in Column 34, for example. Remember to return void from you JavaScript statements, as explained in Column34. It's time to play with the frames now. Convince yourself that both methods work the same and as described above.

Here is frame1new.html:

<HTML>
<HEAD>
<TITLE>Frame 1</TITLE>
</HEAD>
<BODY>
Frame 1
<P>
<A HREF="frame4new.html" TARGET="bottomrow" onClick="parent.frames[1].
location.href = 'frame4new.html'; return true;">Multiple Load #1</A><BR>
  // (The above two lines should be joined as one line.
  // They have been split for formatting purposes.)
<A HREF="javascript:void(parent.frames[1].location.href='frame4new.html');
void(parent.frames[2].location.href='frame4new.html');">Multiple Load #2</A>
  // (The above two lines should be joined as one line.
  // They have been split for formatting purposes.)
</P>
</BODY>
</HTML>


https://www.internet.com

Produced by Yehuda Shiran and Tomer Shiran

Created: March 1, 1999
Revised: March 1, 1999

URL: https://www.webreference.com/js/column36/multiple.html