Java Reference
In-Depth Information
The radio buttons allow the user to determine which frame he wants to navigate to a new page. When
he changes the currently selected page in the drop-down list, that page is loaded into the frame selected
by the radio buttons.
If you navigate using the links in the pages inside the
frameTop
and
frameBottom
frames, you'll notice
that the selected frame radio buttons and the drop-down list in
frameMenu
on the left will be automati-
cally updated to the page and frame just navigated to. Note that as the example stands, if the user loads
ch08_examp3_a.htm
into a frame the select list doesn't allow it to load the same page in the other frame.
You could improve on this example by adding a button that loads the currently selected page into the
chosen frame.
The List Pages Visited buttons display a list of visited pages, as they did in the previous example.
You've already seen how the code defi ning the top window in
ch08_examp3.htm
works, as it is very
similar to the previous example. However, look quickly at the
<frameset/>
element, where, as you can
see, the names of the windows are defi ned in the names of the
<frame/>
elements.
<frameset cols=”200,*”>
<frame name=”frameMenu” src=”ch08_examp3_menu.htm”>
<frame name=”frameMain” src=”ch08_examp3_main.htm”>
</frameset>
Notice also that the cols attribute of the <frameset/> element is set to “200,*”. This means that the
fi rst frame will occupy a column 200 pixels wide, and the other frame will occupy a column taking up
the remaining space.
Let's look in more detail at the
frameMenu
frame containing
ch08_examp3_menu.htm
. At the top of the
page, you have your main script block. This contains the function
choosePage_onchange()
, which is
connected to the
onchange
event handler of the select box lower down on the page. The select box has
options
containing the various page URLs.
The function starts by defi ning two variables. One of these, choosePage, is a shortcut reference to the
choosePage Select object further down the page.
function choosePage_onchange()
{
var choosePage = document.form1.choosePage;
var windowobject;
The
if...else
statement then sets your variable
windowobject
to reference the
window
object of
whichever frame the user has chosen in the
radFrame
radio button group.
if (document.form1.radFrame[0].checked == true)
{
windowobject = window.parent.frameMain.fraTop;
}
else
{
windowobject = window.parent.frameMain.fraBottom;
}
As you saw earlier, it's just a matter of following through the references, so window.parent gets you a
reference to the parent window object. In this case, window.top would have done the same thing. Then
window.parent.frameMain gets you a reference to the window object of the frameMain frame. Finally,
depending on which frame you want to navigate in, you reference the frameTop or frameBottom window
