Ken Ward's Java Script Tutorial ...

Hyperlinks in Frames

If you need to check out frames in HTML, then try the HTML Tutorial. Or More on Frames.

We have looked at menus and jumps from page to page, but we have not looked at menus in frames. The first example loads a page into another frame.

When the button is pressed, the onClick event calls the following function:

function jump(url){

parent.frames[0].location=url;

}

The one line of code tells the browser where to locate the file. It tells it that the first frame in the parent (which is the frame page) is the one to load in. (The frames are numbered from 0 in the order they appear in the frames page. So the first one is frames[0], the second frames[1], etc.

When pages are quite long, or there are a lot of documents, using frames with navigation helps the users to find their way through the long document or through the pages. Clearly, a button which loads one URL isn't much use. A select box, as we used them with a single page, is much more useful.

Select Boxes in Frames

If you clicked the above link you would have seen a frames page with a select box in the bottom frame and if you choose an option, the file is loaded into the top frame. The code is almost exactly the same as for the select box in one page. The only difference is this one line of code:

parent.frames[0].location = document.form2.select2.options[PageIndex2].value

And this is the same as before except for the part in bold. Whereas before we had the value for the location, here we need to specify the location as the top frame. Because the top frame (which is also the first frame -frames[0]) has the name value "main", we can also use this code:

parent.main.location = document.form2.select2.options[PageIndex2].value

View the source to study the code.