Update Two Frames

Important!

In order for this page to work it must be loaded in it's frame. If it is not in it's frame then click here to load the frame and then click on "Update 2 Frames at Once".

Update Both Frames Again

Hopefully you have spotted that this Frames page consists of 3 frames. A title frame at the top. The menu frame on the left and this main frame here. When you clicked on the link in the menu frame both the Main Frame and the Title Frame were both changed. This is one of the most requested things that people who email me want to know how to do and after absolutely ages I have finally made myself produce this page. This works in IE3+, Netscape 3+ and FireFox.

So how does it work?

It's very simple actually. As you all know (and if you don't this is not the website for you) you use the <A HREF = "whatever.htm">Click to go to whatever</A> tags to move from one page to another. You specify the page location in-between speech marks after the HREF. This however only changes one page.

When you use frames you will of course specify a target frame to go to eg.

<A HREF = "updatetwoframes.htm" TARGET="main">

will load the updatetwoframes.htm page into the frame which is called main. To make another frame change at the same time you need to use some simple JavaScript.

ONCLICK='parent.menu_frame.location="top2.htm"'

This is the JavaScript that is needed. When the link is clicked on, the page called top2.htm is loaded into the frame called menu_frame. Just change the word menu_frame to whatever the name of the your frame is. When both the HTML and JavaScript are put together we get:

<A HREF = "updatetwoframes.htm" TARGET="main"
ONCLICK='parent.menu_frame.location="top2.htm"'>

When clicked the page updatetwoframes.htm is loaded into the main frame and top2.htm is loaded into the menu_frame frame.

Updating More Than Two Frames

To update more than two frames is not difficult. Simply separate the ONCLICK commands by using semicolon eg.

<A HREF = "updatetwoframes.htm" TARGET="main"
ONCLICK='parent.frame1.location="page1.htm";
parent.frame2.location="page2.htm";
parent.frame3.location="page3.htm"'>

Tip

As this relies on Java the people with non JavaScript browsers will not see the pages in the ONCLICK section. You should therefore put the most important page in the HREF section so that it will be loaded regardless of browser.

The

Advanced.

HTML

Site