Helen Bradley and John Hilvert look at controlling a site that uses frames with JavaScript code, and also how you can adapt last month's rollover menu to run in a small frame at the top of your page.

From the CD (see 'Files on cover CD' on how to obtain them) load example*.htm (*depending on which example you wish to use) into your browser using File, Open and note which page displays on your browser. If you have more than one browser on your computer, open it in the others and notice how the page which appears changes according to the browser and version you're using.

To view or use the source code for each file, you can use any HTML editor, text editor and most Web browsers.

The HTML source in this project has been written so that you can use it for a number of applications. It displays one of a range of three pages depending on what browser your user is using, and is easily expandable beyond this. The source has been designed so that you can easily adapt it to your own programs.

Load the file example1.htm into your browser using File, Open. When the file is loaded, select a menu option from the left of the screen and watch as different pages appear in the frame on the right (see Figure 1d).

The source that creates the frames is in example1.htm. The <FRAMESET>... </FRAMESET> tags replace the BODY tags and create two columns: the first one called 'menu' is 90 pixels wide and the second one, called 'main' is the width of the remainder of the browser window. The file menu1.htm is loaded into the left frame and the file instruct.htm is loaded into the right frame:

<FRAMESET COLS=90,*>
<FRAME NAME="menu" SRC="menu1.htm" MARGINHEIGHT=0 MARGINWIDTH=0 SCROLLING=NO NORESIZE>
<FRAME NAME="main" SRC="instruct.htm" MARGINHEIGHT=0 MARGINWIDTH=0 SCROLLING=AUTO>
</FRAMESET>

Selecting a menu option from the left frame replaces the page in the right frame with another page. For example, if you select 'Back', the page back.htm is loaded into the frame called 'main' by the use of the TARGET attribute:

<A HREF="back.htm" TARGET=main>Back</A><P>

If you select the menu option 'Home' the frames disappear entirely as the file main1.htm is loaded into the entire window by the use of the attribute TARGET=_top:

<A HREF="main1.htm" TARGET=_top>Home</A> (exits frames)<P>

A simple JavaScript example

Adapting this first example to JavaScript involves creating two simple JavaScript functions. The first function loadMainFrame takes a URL from the calling statement and opens this page in the frame called main:

function loadMainFrame(pageToLoad) {
    parent.main.location.href=pageToLoad;
    }

Frames are contained within the window that contains the frameset itself, they are considered to be 'child' windows of this parent window. There are a number of ways you can refer to a frame window in JavaScript. The one used here is to refer to the frame using the name given to it in the frameset tag that created it using the syntax parent.framename.

Another way of referencing the frame is to use the frames[] array where the frames are indexed 0, 1, 2 etc in order of creation. In this example, the frame called 'main' was the second one created, so its index is 1 and it can be referenced as parent.frames[1].

The function exitFrames shows how frames can be removed by loading a page into the parent window, which is the window that contains the frameset. This is equivalent to using TARGET=_top as was used in Example 1. Because this function will only be used in one instance where the user selects the Home button, there is no need to pass a URL to this function and it can contain the actual page name to be loaded:

function exitFrames() {
    parent.location.href="main2.htm"
    }

To create this example you'll need some of the files from Example 1 (next.htm, back.htm, contact.htm and photos.htm) and the additional files listed in Source Box #2. Create these files and load the file example2.htm into your browser.

You'll also need to alter each of the button's link details. Each button will now be linked to a dummy jump link "#" and will use the onClick event handler to call one of the new functions when the button is selected.

You'll also need to create the file mainpage.htm which contains the source for the frames. In this case the page is split into two frames horizontally across the browser window rather than vertically down it because the buttons are in a single table row which stretches across the screen. The top frame has been sized to suit the size of the menu bar images.

A sensible approach to take is to team this menu with the browser checker from March's tutorial and send users with a JavaScript browser to your enhanced page containing the frames and menu and leave other users on the browser checking page with a plainer, non-JavaScript menu.

Yahoo's JavaScript Index: http://www.yahoo.com/Computers_and_Internet/Programming_Languages/JavaScript/

Books
The JavaScript Sourcebook, by Gordon McComb, would be a valuable addition to your library.
Published by John Wiley and Sons.