HTML and CSS Reference
In-Depth Information
EXAMPLE
10.20 (
CONTINUED
)
<html>
<head>
<title>The History Object</title>
<script type="text/javascript">
1
function loadPage(urlAddress)
{
2
parent.frames[1].location.href = urlAddress
;
}
</script>
</head>
<body bgcolor="F8C473">
<big>
3
<form name="form1" id="form1">
<input type="button"
value="Amazon"
4
onClick="loadPage('http://amazon.com');">
<input type="button"
value="Borders"
onClick="loadPage('http://borders.com');">
<input type="button"
value="Barnes&Noble"
onClick="loadPage('http://barnesandnoble.com');">
</form>
</big>
</body>
</html>
EXPLANATION
1
When the function
loadPage()
is called, it gets the URL address of the bookstore
as its only parameter and assigns the address to the
location
object.
2
There are two frames in this document. The first frame contains the buttons with
the names of bookstores to pick from—Amazon, Borders, and Barnes & Noble (see
Figure 10.31). The second frame is empty until the user makes a selection. This
statement assigns the URL of the chosen bookstore to the
location
object by travers-
ing the JavaScript hierarchy, starting at the parent window, to the bottom frame,
frames[1]
and to the
href
property of the
location
object. By doing this, the browser
will find the home page of the bookstore, and display it in the bottom frame.
3
The HTML form starts here. It is a form that displays three graphical buttons.
When the user clicks one of the buttons, a function called
loadPage()
will be in-
voked and the bottom frame will display its Web page.
4
The JavaScript
onClick
event handler is triggered when the user clicks the button.
The function called
loadPage()
will be called with the URL of the bookstore. The
display is shown in Figure 10.32.
