A Wired.com user account lets you create, edit and comment on Webmonkey articles. You will also be able to contribute to the Wired How-To Wiki and comment on news stories at Wired.com.
It's fast and free.
processing...Retrieve Sign In
Please enter your e-mail address or username below. Your username and password will be sent to the e-mail address you provided us.
processing...Welcome to Webmonkey
- edit articles
- add to the code library
- design and write a tutorial
- comment on any Webmonkey article
Sign In Information Sent
Change Two Frames at Once Using JavaScript
/skill level/
/viewed/
m (1 revision(s)) |
|||
| Line 1: | Line 1: | ||
| - | |||
Once upon a time, a Webmonkey reader named Lori wrote in to ask this question: | Once upon a time, a Webmonkey reader named Lori wrote in to ask this question: | ||
| Line 36: | Line 35: | ||
Basically, <tt>onClick</tt> means "when you click this." | Basically, <tt>onClick</tt> means "when you click this." | ||
| - | <tt>window.self.location</tt> refers to the window you're in during the <tt>onClick</tt> (the left-hand frame), which will be the host for <tt>raggy.html</tt>. The part of the script that changes the right frame is <tt>target="otherframe">Zombies | + | <tt>window.self.location</tt> refers to the window you're in during the <tt>onClick</tt> (the left-hand frame), which will be the host for <tt>raggy.html</tt>. The part of the script that changes the right frame is <tt>target="otherframe">Zombies</a></tt>, which targets <tt>otherframe</tt> to be the host for <tt>zoinks.html</tt>. |
(Make sure you follow the hierarchy of quotes and spaces exactly when using JavaScript.) | (Make sure you follow the hierarchy of quotes and spaces exactly when using JavaScript.) | ||
| Line 47: | Line 46: | ||
<span id="title_name_el" class="wm_hidden_meta_class" title="Changing Two Frames at Once" style="visibility:hidden"> <span id="page_path_el" class="wm_hidden_meta_class" title="/webmonkey/97/02/" style="visibility:hidden"> <span id="author_el" class="wm_hidden_meta_class" title="luke" style="visibility:hidden"> <span id="creation_date_el" class="wm_hidden_meta_class" title="1997-01-17T24:00:00Z" style="visibility:hidden"> </span></span></span></span> | <span id="title_name_el" class="wm_hidden_meta_class" title="Changing Two Frames at Once" style="visibility:hidden"> <span id="page_path_el" class="wm_hidden_meta_class" title="/webmonkey/97/02/" style="visibility:hidden"> <span id="author_el" class="wm_hidden_meta_class" title="luke" style="visibility:hidden"> <span id="creation_date_el" class="wm_hidden_meta_class" title="1997-01-17T24:00:00Z" style="visibility:hidden"> </span></span></span></span> | ||
| + | == Introduction == | ||
| + | |||
| + | == What you'll need == | ||
| + | |||
| + | |||
| + | == Steps == | ||
| + | |||
| + | |||
| + | == Alternate methods == | ||
| + | |||
| + | |||
| + | == Suggested readings == | ||
Revision as of 19:46, 11 May 2008
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.
This tip, originally submitted by Webmonkey writer Luke Knowland, is a wiki. Portions of it may be outdated, so feel free to log in and edit it. Got extra advice? Go ahead and add it.
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.
Introduction
What you'll need
Steps
Alternate methods
Suggested readings
/related_articles/
Special Offer For Webmonkey Users
WIRED magazine:
The first word on how technology is changing our world.
Registration on or use of this site constitutes acceptance of our User Agreement (Revised 4/2/2009) and Privacy Policy (Revised 4/2/2009).
Wired.com © 2009 Condé Nast Digital. All rights reserved.
The material on this site may not be reproduced, distributed, transmitted, cached or otherwise used, except with the prior written permission of Condé Nast Digital.