Changing the Contents of Two Frames at Once

top.frames[frame1].location.href = url1; top.frames[frame2].location.href = url2; 

One of the most common questions regarding JavaScript is how to change two frames at once. Although frames are becoming more and more unpopular among professional web developers, this question is still a hot topic.

Of course, JavaScript can come to the rescue. A function expects the names or indexes of the two frames, and of course the two URLs to load. Since the individual frames are changing during the course of the application, this function should be placed in the frameset document:

The Frameset with the JavaScript Function (frameset.html)

<script language="JavaScript"   type="text/javascript"> function changeFrames(frame1, url1, frame2, url2) {   top.frames[frame1].location.href = url1;   top.frames[frame2].location.href = url2; } </script> <frameset cols="150,*">   <frame src="/books/3/490/1/html/2/frame1a.html" name="navigation" />   <frame src="/books/3/490/1/html/2/frame2a.html" name="content" /> </frameset> 

The left frame in this example is the navigation frame; the right frame is the content frame. When a link in the navigation frame is being clicked, both frames change, since every page in the right frame has an associated navigation page (with the current page highlighted) for the left frame.

The Frameset with the Navigation (frame1a.html)

[View full width]

Frame 1<br /> <a href="javascript:top.changeFrames('navigation', 'frame1b.html', 'content', 'frame2b .html');"> Frame 2</a> 

A more general approach does not limit the number of frames to two, but just accepts an arbitrary number of frame names and URLs:

The Frameset with the More Flexible JavaScript Function (frameset.html; excerpt)

function changeFrames() {   for (var i=0;     i < Math.ceil(changeFrames.arguments.length/2);     i++) {     top.frames[changeFrames.arguments[2 * i]].location.href =       changeFrames.arguments[2 * i + 1];   } } 

The file frameset.html in the download archive contains both versions of changeFrames(), with the less flexible one within a JavaScript comment.

Tip

Of course, this example works best if users without JavaScript are not excluded. So one approach would be to load a new page in the content frame, but use JavaScript to change the left frame as well, if the browser supports it:

<a href="frame2b" target="content"   onclick="top.changeFrames('navigation',      'frame1b.html', 'content', 'frame2b.html');     return false;">Frame 2</a> 

Using Hidden Frames for Data Storage

One quite convenient usage option for frames is to use hidden frames. This can, for instance, be used to store data across HTTP requests. Since all JavaScript data is lost if the page is unloaded, a hidden frame comes in handy to store data, for instance when creating a client-side shopping cart.

So all you have to do is create a frame with the height equal to one pixel or similar. Then, whenever you have to store away data, you just access the frame and save the required data in variables that are all accessible as properties of that frame:

top.frames["hiddenJsFrame"].variable = "value"; 

In a similar fashion, you can obviously also put common functions within that frame and then call them in a similar fashion:

top.frames["hiddenJsFrame"].functionName();