1. Home
  2. Computing & Technology
  3. Web Design / HTML

Open Two Frames with One Link
Use Dynamic HTML to Open Two Frame Windows with One Link

By , About.com Guide

With a frameset links will either open in the frame they are currently in, or a named frame. But, when you have a frameset with multiple frames, sometimes it would be useful to click on a link and have two frames change.

To open two frames with one link, you need to use dynamic HTML.

The first step, however, is to set up your frames so that the DHTML will work. You have to name your frames:

<frameset rows="100,*">
<frame src="top.html" name="top">
<frame src="bottom.html" name="bottom">
</frameset>

Set Up the Link

So far, we've created two frames, the top frame called "top" and the bottom called "bottom". In the top.html page, we'll put the link that will change both frames.

Normally, when you add a link to a frame, the link will open either in the same frame that it's in, or in the frame that is named in thetargetattribute.

In your top.html page, put a link in to change the top.html to top2.html:
<a href="top2.html">This will change both frames</a>

Then you need to add the script to change the bottom frame. You do this with JavaScript and onClick.

You use the Javascript to tell the browser to change the named frame's location:
onClick='parent.bottom.location.href="bottom2.html"'.
Remember, the bottom frame is called "bottom". If you wanted to change a frame called "navigation" you would writeparent.navigation.location.href

The final link to change two frames at once looks like:
<a href="top2.html" onClick='parent.bottom.location.href="bottom2.html"'>This will change both frames</a>

Explore Web Design / HTML
About.com Special Features

Holiday Central

What to eat, where to go, fun things to do and how to save money on the perfect gifts. More >

Family Tech Center

Stay connected and entertained with reviews on tips on the latest HDTVs, cellphones and more. More >

  1. Home
  2. Computing & Technology
  3. Web Design / HTML
  4. About.com Web Design A to Z
  5. Web Design Articles I-Q
  6. Web Design/HTML Articles O
  7. Open Two Frames with One Link>

©2009 About.com, a part of The New York Times Company.

All rights reserved.