File Under: JavaScript

Change Two Frames at Once Using JavaScript

Once upon a time, a Webmonkey reader named Lori wrote in to ask this question:

“I was wondering how I can make two frames change at the same time (with one click). I’ve seen it done here and there, but haven’t had much luck finding any documentation.”

You can change two frames at once with JavaScript. Don’t worry, though, this isn’t rocket science. It’s simply a matter of telling the document with the link what it and the other document (the one the link points to) are going to do. It’s pretty easy, really.


Changing Two Frames At Once

Imagine we have a page with two frames in it — one on the left and one on the right. We have a link in the left frame that we want to change both frames. In the document that fills the left frame, we’ll pop this in:

<a href="zoinks.html"

onClick="window.self.location='raggy.html'" target="otherframe">

Zombies</a>

Let’s break it down:

<a href="zoinks.html"

This is the new document that will be loaded into the right-hand frame.

onClick="window.self.location='raggy.html'"

target="otherframe">Zombies</a>



Basically, onClick means “when you click this.”

window.self.location refers to the window you’re in during the onClick (the left-hand frame), which will be the host for raggy.html. The part of the script that changes the right frame is target="otherframe">Zombies</a>, which targets otherframe to be the host for zoinks.html.

(Make sure you follow the hierarchy of quotes and spaces exactly when using JavaScript.)

It’s also important that you name the right side of the page otherframe (or whatever you call your target) in the document where you call the frameset. Otherwise zoinks.html won’t end up in the right place. If you don’t know what I’m talking about, check out Jill’s column on targeting frames: Put Links in Framesets.

If you’ve done everything properly, you should be able to click on the word “Zombies” in the left frame, and zoinks.html will show up in the right frame at the same time that raggy.html shows up in the left frame.