This section discusses how to manipulate the browser's window and surrounding environment. The browser window consists of a number of areas that can be controlled through scripting, including the location of the currently displayed document, status bar text, history, and screen resolution. Figure 4-2 shows the various window features.
Figure 4-2. The window features that can be controlled by the window object.
The status bar text is usually displayed along the bottom of the browser. Access to the message is available through two properties: defaultStatus and status. Both properties are read/write strings. The difference is that the status property is used for a message that is displayed temporarily, and the defaultStatus property displays a message until the defaultStatus property is changed or the user exits the browser window, as shown here:
<HTML>
<HEAD>
<TITLE>Status Text</TITLE>
<SCRIPT LANGUAGE="JavaScript">
function setStatus() {
// Status message to display
window.defaultStatus = "Default status";
// Temporary message to display
window.status = "Temporary status";
}
</SCRIPT>
</HEAD>
<BODY> <FORM> <INPUT TYPE=BUTTON VALUE="Change Status" ONCLICK="setStatus();"> </FORM> </BODY> </HTML>
When the Change Status button is clicked, the status bar displays the string Temporary status. Once the mouse is moved, the message will change to Default status. When the user exits a page, the status bar text is reset to the browser's default message.
By using the onmouseover and onmouseout events on an element, you can very easily display a special status message when the mouse pointer is on the element:
<A ONMOUSEOVER="window.status=`Go Home'" ONMOUSEOUT="window.status=''" HREF="home.htm"> Top Page </A>
Sample code for creating scrolling status bar text that takes advantage of the status property and timers is presented in the section "Scrolling Status Bar Text" later in this chapter.
Dynamic HTML provides methods for creating custom history buttons. Although accessing the actual URLs visited by the user is not possible, the history object exposes three methods that simulate clicking the history buttons on the toolbar: the go, forward, and back methods. The length property exposes the number of elements in the history list. The following code creates simple Back and Forward buttons:
<HTML> <HEAD> <TITLE>History Buttons</TITLE> </HEAD> <BODY> <FORM NAME="Browse"> <INPUT TYPE=BUTTON VALUE="Back" ONCLICK="history.back();"> <INPUT TYPE=BUTTON VALUE="Forward" ONCLICK="history.forward();"> </FORM> </BODY> </HTML>
The address of the page in the window is exposed through the location property, which references an object that identifies the URL, parsed into easy-to-use properties. These components make the URL easier to retrieve and manipulate.
The location Object Properties
Most of the properties of the location object break the URL into easy-to-use components. The properties that relate to the URL are listed here:
protocol://hostname:port/ pathname?search#hash
Almost all URLs have a protocol, a hostname, and a pathname. The port, search, and hash properties might not have values associated with them. The search property represents the search string usually supplied for server-side CGI (Common Gateway Interface) scripts. The hash property represents the bookmark on the page.
In addition, the location object exposes a few extra properties that concatenate the properties mentioned. For example, the host property simply returns the hostname followed by a colon and the port. The href property is the entire URL exposed as a single string.
Assigning a value to any of these properties causes the browser to immediately try to navigate to the new page. For most operations, the href property is the one you should set to load a new page; you can also use the replace method, discussed next.
The location Object Methods
Two of the methods exposed on the location object are reload([force]) and replace(url). Calling the reload method is analogous to clicking the Refresh button on the browser—both actions force the entire page to reload if it has changed. By supplying true as the force parameter, you can force the page to reload, even if the server claims that the page has not changed.
The replace method navigates to a new page. It works similar to assigning a value to the href property, except that the replace method does not add the current page to the history list. The replace method is useful for client-side URL redirection, as shown in the following example:
<HTML>
<HEAD>
<TITLE>Browser Detection</TITLE>
<SCRIPT LANGUAGE="JavaScript">
// Load a different version of the page for Netscape users.
if ("Netscape" == navigator.appName)
location.replace("nsversion.htm");
</SCRIPT>
</HEAD>
<BODY>
<!— Page for other browsers —>
</BODY>
</HTML>
The screen object exposes information about the current user's display, including the screen resolution and color depth. This information lets your code analyze the user's visual support and update the display accordingly. The following table lists the properties available on the screen object.
| Property | Description |
| width | Horizontal resolution of the screen in pixels |
| height | Vertical resolution of the screen in pixels |
| colorDepth | Bits per pixel used by the display or buffer |
| availHeight | Screen height inside docked windows |
| availWidth | Screen width inside docked windows |
The availHeight and availWidth properties give the dimensions of the portion of the user's screen that is available for windows—that is, the space not taken up by any docked tool bars.
This information can also be used at load time to determine how the document should be presented: either different style sheets can be applied, or an entirely different document can be loaded. The following code demonstrates how to redirect users with low-resolution screens to an alternative document and how to disable a style sheet intended only for users with a specific color depth:
<HTML>
<HEAD>
<TITLE>Screen-Based Pages</TITLE>
<LINK REL="styleSheet" TYPE="text/css" HREF="256color.css">
<SCRIPT LANGUAGE="JavaScript">
if ((640 >= screen.width) || (480 >= screen.height))
window.location.replace("lowres.htm");
document.styleSheets[0].disabled = (screen.colorDepth < 8);
</SCRIPT>
</HEAD>
<BODY>
<!— Document's contents —>
</BODY>
</HTML>