Writing for the World Wide Web
Changing Two Frames with One Link
 Note:  This JavaScript requires an understanding of using HTML Frames.

When using frames, you may sometimes designate one frame to hold a menu and one frame to hold the information for your page. In some instances, you may want to be able to change the content of both windows with a single link, possibly to load a new menu when new information appears in the info frame. Just create your pages similar to the following example; start with something like this for your frames page:

<frame src="menu1.html" name="menuside" />
<frame src="info1.html" name="infoside" />

Which would create a page that looks something like this:

menuside
New Menu
(currently displaying "menu1.html")
infoside
(currently displaying "info1.html")

You want to be sure to not only have initial pages load into your frames page (the src attribute), but you also want to name all of your frames so you can refer to them with JavaScript functions. Include a link in your menu1.html file with this onclick function:

<base target="infoside" />

<a href="info2.html" onclick="parent.menuside.location='menu2.html'; return true;">New Menu</a>

The above lines of code placed in the head of your document will generate the alert window you saw when this page loaded. Here is a basic breakdown of what each part means:

  • parent—this refers to the main HTML page that loads in the browser and divides the window into frames with the <frameset> tag
  • menuside—this refers to the "menuside" frame you named in your frames setup page
  • location—changes the location of the designated frame side document.menuside to the URL specified in the 'single quotes'

Clicking the link would change the page to look something like this:

menuside
(now displaying "menu2.html")
infoside
(now displaying "info2.html")

The code should provide you with a feature like this example.


Home | Course Information | Assignments | Schedule | Class Notes | Resources | Student Pages