Hierarchical Menus in Frames
pages in the main frame
In our discussion thus far, we have described what happens when the frameset loads. The frameset onload handler will not fire again when we load a page into the main frame. We must, therefore, include an onload handler in all the pages destined for our main frame.
To keep our multiple-page insertions to a minimum, we avoid calling a function with the onload statements, and simply include the statements in the BODY tag. The onLoad handler statements should be kept on one line:
<BODY
onLoad="if(parent.frames.nav && parent.frames.nav.startIt)
parent.frames.nav.startIt()">
When the page loads into the main frame, it first checks for the existence of parent.frames.nav, the navigation frame. If the page is loaded into a full window, or into another frameset that doesn't require menus, parent.frames.nav will return false, because a sibling frame named nav does not exist. In this case, the conditional terminates and no other action is taken.
If a frame named nav exists, then the handler checks for the existence of an object in that frame called startIt, which is our initializing function. This check will return true if the function exists, which means that the navigation frame exists and it has fully loaded. If this is the case, then startIt() is called with the handler's statement: parent.frames.nav.startIt()
Since the menu script is already loaded in the navigation frame, there is no "load" overhead for the other pages, making all subsequent menu creation faster.
Recap
To create hierarchical menus in a frameset:
Create a frameset document. It is recommended that the navigation frame is called nav and the main frame is called main.
Place the browser-detection script in the navigation frame document.
Place the parameter variable script in the navigation frame document, with the parameters defined appropriately for your application. Make sure that isLeftNav reflects the position of the navigation frame in the frameset.
Define your menu arrays in an external file called hierArrays.js
Include hierArrays.js and the main menu script, hierFrames.js, in the navigation page by conditionally loading them for menu-enabled browser versions.
Define the onLoad handler of the BODY tag for all pages loaded into the main frame.
The Future of This Script
Who knows? We thought we were done with it a month ago. The one problem we did not overcome was the necessity to include code, even if it is only one line, in the main frame pages. Many workarounds were developed, but none was 100% foolproof.
But, we'll keep at it...
The full code is presented over the next three pages, as usual.
| 
Find a programming school near you