10.1.5 The location Object The location object is a property of the window object and is used to access the URL of the document currently loaded in the window.. In previous examples, we
Trang 110.1.5 The location Object
The location object is a property of the window object and is used to access the URL of
the document currently loaded in the window In previous examples, we have seen
loca-tion as a window property, but because it is really also an object itself, it also has
proper-ties used to describe the different parts of a URL (see Table 10.13)
If you are writing a page containing frames, the entire page might not be picked up
by a search engine, such as Yahoo! or Google Anyone linking to your page via the search
engine will only get part of the page, not the complete frameset Also, when a page is
divided into frames, the visitor cannot bookmark the page if the browser is not pointing
to the top frameset The location object can be used to make sure the topmost window
is the one currently viewed in the browser (See the section “Using the top Property to
Keep the Main Window Out of a Frame” on page 310.)
F O RM A T
JavaScript: window.location.href = "URL";
JavaScript: window.location.replace("URL");
E X A M P L E
JavaScript: window.location.href = "http://www.legos.com/";
JavaScript: window.location.replace("http://www.legos.com/");
Table 10.13 Properties of the location Object
hash If it exists, the anchor part.
host The hostname:port.
hostname The hostname.
href The entire URL.
pathname The pathname.
port The port number.
protocol The protocol and colon.
search The query string.
Trang 2Two methods of interest (see Table 10.14) are replace() and reload() The replace()
method is used to change the location of the current page; that is, to point to another
page It is similar to the href property, but where href puts the new page at the top of the
history list, the replace() method removes the current page from the history list and
replaces it with the new page The reload() method behaves like the browser’s Reload
button It causes the window’s current document to be reloaded
Loading a New Page into a Frame with the location Object. In Example 10.20,
the location object changes the location of the current page By selecting a Web site, the
user is taken to that site, which is displayed in the bottom frame of a frameset
Table 10.14 Methods of the location Object
reload() Reloads the current URL.
replace() Replaces the current page with a new one.
unwatch() Removes a watch point on the location property.
watch() Sets a watch point on the location property; that is, calls a function if the
property changes.
E X A M P L E 1 0 2 0
(The file defining the framesets called framefile.html)
<html>
<head><title>Frames</title></head>
<frameset rows="130,*" frameborder="yes" border="8"
framespacing="0">
<frame src="location.html" scrolling="no">
<frame src="emptyframe.html" >
</frameset>
</html>
-(The empty file that will be the bottom frame called emptyframe.html)
<html>
<head>
<title>Empty Frame</title>
</head>
<body>
</body>
</html>
Trang 3
<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>
E X P L A N A T I O N
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, starttravers-ing 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
E X A M P L E 1 0 2 0 (C O N T I N U E D)
Trang 4Figure 10.31 Two frames: The top frame puts the location of the bookstore in the
bottom frame.
Figure 10.32 After the user clicks the Borders button, the bottom empty frame gets
the page at that location.
Trang 510.1.6 The history Object
The history object is a property of the window object It keeps track of the pages (in a
stack) that the user has visited The history object is most commonly used in JavaScript
to move back or forward on a page, similar to the back button and forward button
sup-ported by your browser The history object can reference only those pages that have been
visited; that is, those pages on its stack It has a length property and three methods called
go(), back(), and forward() See Tables 10.15 and 10.16.
Table 10.15 Properties of the history Object
current The current document URL.
length The number of entries in the history object
next The URL of the next document in the
history object
previous The URL of the previous document in the
history object.
search The query string.
Table 10.16 Methods of the history Object
back() Goes to the previous URL entry in the history list; like the browser’s back
button.
forward() Goes to the next URL entry in the history list; like the browser’s forward
button.
go() The browser will go forward or back (if the value is negative) the
number of specified pages in the history object.
E X A M P L E
history.go(-3) // Go back three pages
history.go(2) // Go forward three pages
Trang 6E X A M P L E 1 0 2 1
1 (The file defining the framesets called framefile.html)
<html>
<head><title>Frames</title></head>
<frameset rows="130,*" frameborder="yes" border="8"
framespacing="0">
<frame src="location.html" scrolling="no">
<frame src="emptyframe.html" >
</frameset>
</html>
-2 (The empty file will be the bottom frame called emptyframe.html)
<html>
<head>
<title>Empty Frame</title>
</head>
<body>
</body>
</html>
-<html>
<head>
<title>The History Object</title>
<script type="text/javascript">
function loadPage(urlAddress){
3 parent.frames[1].location.href = urlAddress;
}
</script>
</head>
<body>
<font size="+1" face=arial,helvetica>
<form name="form1">
<input type="button"
value="Amazon"
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>
<form name="form2" id="form2">
<input type="button"
value="go back"
4 onClick="JavaScript: history.go(-1);">
<input type="button"
value="go forward"
5 onClick="JavaScript: history.go(1);">
</form>
Trang 7</font>
</body>
</html>
E X P L A N A T I O N
1 This file defines the framesets that will be used to create the page seen in Figure
10.33
2 This is the empty frame file seen at the bottom of the page
3 When the user clicks one of the buttons, labeled Amazon, Borders, and Barnes &
Noble, parent.frames[1].location.href, the bottom frame, will be assigned the URL
of the selected page
4 This button will be used if the user wants to go back to the previous page If the
history object’s go() method takes a negative integer, such as history.go(-1), the
user will be sent back to the previous page just visited (If nothing happens, the
page is blank, and there is nothing in the history list to return to.)
5 This button will be used if the user wants to move to the next page If you move
forward and nothing happens, it’s because you don’t have anything on the history
stack yet; you haven’t gone anywhere Once you load a new page, then go back,
you will be able to move forward Likewise if you go back and an empty page
ap-pears, it is because you haven’t loaded a page yet The history object’s go() method,
history.go(1), will then move you forward one page Output is shown in Figures
10.33 and 10.34
Figure 10.33 Frames before selecting a bookstore.
E X A M P L E 1 0 2 1 (C O N T I N U E D)
Trang 8The screen object is a property of the window object and is automatically created when a
user loads a Web page It gives you access to the various properties of the user’s screen
such as its height, width, color depth, and so on These are listed in Table 10.17 This
can be helpful when designing pages that will require specific dimensions For example,
if the user’s available screen width is less than 650 pixels (640×480), you might want to
load a smaller image, whereas if it is over 1,000 pixels (1024×768), a larger image can
be loaded There are no event handlers for this object Example 10.22 displays the
prop-erties of the screen object shown in Table 10.17
Figure 10.34 Bottom frame displays bookstore If another bookstore is selected,
then you can use history.
Table 10.17 Properties of the screen Object
availHeight The pixel height of the screen, minus toolbars, and so on.
availLeft The x coordinate of the first pixel, minus toolbars, and so on.
Trang 9availTop The y coordinate of the first pixel, minus toolbars, and so on.
availWidth The pixel width of the screen, minus toolbars, and so on.
colorDepth The maximum amount of colors that the screen can display.
height The pixel height of the screen.
pixelDepth The number of bits per pixel of the screen.
width The pixel width of the screen.
E X A M P L E 1 0 2 2
<html>
<head><title>Screen Properties</title></head>
<body bgcolor="orange"><font face="verdana">
<b>The Screen</b><br />
<table border=2>
<tr><th>Screen Property</th><th>Value</th></tr>
<tr>
<td>Height</td>
<td>
<script type="text/javascript">
</script>
</td>
</tr>
<tr>
<td>Available Height</td>
<td>
<script type="text/javascript">
</script>
</td>
</tr>
<tr>
<td>Width</td>
<td>
<script type="text/javascript">
</script>
</td>
</tr>
Continues
Table 10.17 Properties of the screen Object (continued)
Trang 10<tr>
<td>Available Width</td>
<td>
<script type="text/javascript">
</script>
</td>
</tr>
<tr>
<td>Color Depth</td>
<td>
<script type="text/javascript">
</script>
</td>
</tr>
</table>
</font>
</body>
</html>
E X P L A N A T I O N
1 The height property of the screen object contains the height of the screen in pixels
(To see how to create a table dynamically with JavaScript, see Chapter 15, section
“Creating a Table with the DOM” on page 644.)
2 The available height is the height minus any toolbars or other objects attached to
the window
3 The width property of the screen object contains the width of the screen in pixels.
4 The availWidth is the pixel width of the screen, minus toolbars, and so on.
5 The colorDepth refers to the maximum number of colors that the screen can
dis-play in bit format The disdis-play is shown in Figure 10.35
E X A M P L E 1 0 2 2 (C O N T I N U E D)
Trang 1110.2 What You Should Know
They say windows are the eye of the soul and what would a browser be without them?
This chapter was devoted to the BOM, and specifically the browser’s window object You
learned how to open and close a window, and to divide it up into frames, how to time
events within a window, create popups, navigation bars, and how to find the properties
of your screen You know the following about the browser and windows:
1 The appName and userAgent for your browser
2 How to detect a plug-in
3 What a browser sniffer does
4 What MIME types are
5 How to open and close a window
6 How to give the window focus
7 How to move a window to another part of the screen
8 How to access the status bar
9 How to access the title bar
10 Two ways to set a timer
11 How to create frames
12 How to create a navigation bar
13 How to use the location object
14 How to use the history object to keep track of pages recently visited
15 How to find the dimensions of your screen
Figure 10.35 Tables showing properties of the screen object in Internet Explorer
(left) and Firefox (right).
Trang 121 In a new window, print all the properties of the navigator object.
2 Write a script that will display the name of your browser, the version, and the
operating system you are using (Use the parseInt() function to print just the
version number.)
3 Does your browser support Shockwave Flash? Write a JavaScript program to
show whether the plug-in is installed
4 Create two links, one to open a new window and one to close it The new
win-dow will display this message in a big font: The eye is the winwin-dow to your soul
The new window will be positioned in the left corner of your screen, will be resizable, have a scrollbar, and it will have the focus
5 Create an HTML document that contains four frames (i.e., four panes in a
win-dow, as in Figure 10.24) Each frame will display a different image In another window, use JavaScript to display the number of frames in the original window and the name of the original window
6 Create a program that produces a page containing frames The first frame
will span across the top of the page and contain a centered heading entitled
A Virtual Zoo A second frame will be used as a navigation bar at the left side of
the screen It will contain links to five animals When the user clicks a link, an image of that animal will appear in a frame of its own to the right side of the navigation bar
7 In an alert dialog box, display the pixel height, width, and color depth of your
screen Each value will be separated by a newline
8 Create a program that will create a digital clock in the status bar Use the
setInterval() method to update the status bar once every minute with the
current time
E x e r c i s e s