Browser Objects
| [ LiB ] |
Browser Objects
Internet browsers provide access to a large collection of browser objects. In the next several sections I will introduce you to some of the more commonly used browser objects and demonstrate how to work with them using JavaScript.
The window Object
The window object is the ancestor of all other objects on the page. Multiple windows can be opened at the same time. The window object has dozens of objects and methods associated with it, many of which you have already worked with. For example, you've used the window.alert() method to display messages in the alert dialog box, window.prompt() to retrieve user input, and window.confirm() to seek user permission before taking action.
Depending on which browser you use, there are also methods for controlling navigation. For example, Netscape Communicator supports window.back() , window.forward() , and window.home() . However, Internet Explorer does not support these methods. This points out one small area of difference between the two browsers. The following example demonstrates the use of these window object methods when processed by Netscape Communicator.
<HTML> <HEAD> <TITLE>Script 3.4 - Working with the Window Object - 1</TITLE> </HEAD> <BODY> <FORM NAME="form1"> <INPUT TYPE="button" VALUE="Back" onClick="window.back()"> <INPUT TYPE="button" VALUE="Home" onClick="window.home()"> <INPUT TYPE="button" VALUE="Forward" onClick="window.forward()"> </FORM> </BODY> </HTML>
The script defines a form that contains three buttons . Clicking on a button causes its onClick event to execute. In the case of the button labeled Back, the onClick event executes the window.back() method, causing the browser to load the previous Web page. Clicking on the Forward button causes the exact opposite action, while clicking on the Home button reloads the current page. Don't worry about the onClick event handler right now; you'll cover event handlers at the end of the afternoon. For now, just know that event handlers enable you to associate JavaScript statements and functions with user actions such as mouse clicks on objects.
Figure 3.8 shows how the preceding looks when loaded by Netscape Communicator. Clicking on the Home button tells the browser to load the URL that the user has set up as the default home page. Clicking on the Back or Forward button produces the same effect as clicking on the browser's Back or Forward button.
Figure 3.8. Creating your own navigation buttons
The following script gives you another example of working with the window object's methods. In this example, the browser opens a second window as soon as the Web page loads, using the window object's open () method. The window is named window1 .
<HTML> <HEAD> <TITLE>Script 3.5 - Working with the Window Object - 2 </TITLE> </HEAD> <BODY> <SCRIPT LANGUAGE="JavaScript" TYPE="Text/JavaScript"> <!-- Start hiding JavaScript statements window1=window.open(); // End hiding JavaScript statements --> </SCRIPT> <FORM NAME="form1"> <INPUT TYPE="button" VALUE="Close the window" onClick="window1.close()"> <INPUT TYPE="button" VALUE="Resize" onClick="window1.resizeTo(300,400)"> </FORM> </BODY> </HTML>
NOTE
You have doubtlessly seen many Web sites in which multiple windows open when you click on links. Usually, the other windows appear in the form of smaller windows that try to sell you a product or point you to other links.
The script contains a form that defines two buttons, each of which contains an onClick event handler. If you click the first button, labeled Close the Window, the window object's close() method is executed. In order for the browser to know which window you want to close, you must specify the window's name (in this case, it's window1 ).
The second button in the form, Resize, executes the window object's resizeTo() method. This method tells the browser to change the size of the window1 window object to a pixel size of 300 by 400.
Figure 3.9 demonstrates what you'll see when you first load this page using Internet Explorer. Two windows are opened. The first window displays the form containing the script, and the second window is opened as a result of the script's window1=window.open() statement.
Figure 3.9. Opening and controlling browser windows
The window object's open() method enables you a great deal of control over the appearance of the window. For example, you can control whether the window has certain features such as a menu bar, toolbar, scroll bar, and status bar, as well as whether the window can be resized.
Figure 3.10 shows the location of these features on the browser window.
Figure 3.10. Identifying major browser features
The example that follows demonstrates how to control each of these window features:
<HTML> <HEAD> <TITLE>Script 3.6 -Working with the Window Object - 3 </TITLE> </HEAD> <BODY> <SCRIPT LANGUAGE="JavaScript" TYPE="Text/JavaScript"> <!-- Start hiding JavaScript statements window.open("", "Window1", "menubar=no,toolbar=yes," + "scrollbar=yes,resizable=yes,status=yes, location=yes"); // End hiding JavaScript statements --> </SCRIPT> </BODY> By default, all the window features are enabled. To control them, you would rewrite the statement containing the open() method as follows:
window.open("", "Window1", "menubar=no,toolbar=yes,scrollbar=yes,resizable=yes, status=yes,location=yes"); When written this way, the open() method accepts three sets of parameters. The first parameter is the URL that should be opened in the new window. In the preceding example, I left this parameter blank, causing the browser to open an empty window. The second parameter is the name you are assigning to the window. You must assign a name to the window so that you can reference it from other parts of your script. The final parameter is comprised of one or more arguments separated by commas. Each argument identifies a window feature and assigns it a value of yes or no . A value assignment of yes tells the browser to include that option when creating the window. A value of no tells the browser to eliminate the specified feature. By default, all features are enabled. Therefore, I can get the same results by writing the statement to look like the following:
window.open("", "Window1, " menubar=no") However, by writing the statement the way I did originally, it's easier to come back and change things later; I also think it makes things easier to understand. Figure 3.11 shows what the second window looks like when you load this example using Internet Explorer.
Figure 3.11. Preventing the display of the menu bar on a new window
The document Object
The document object is the heart and soul of JavaScript. Each Web page can contain a single document object. You have already used it extensively to write output to the screen using the document.write() method.
The properties of the document object depend on the content of the page's HTML. For example, if a Web page contains images, then the document properties for the page will contain an images[] array that lists every image on the page.
The document object has a host of properties you can use to control the appearance of the page and to gather information about its contents. For example, the document object stores property values for the following arrays:
-
anchors[]. An array containing a list of all anchors in the document
-
applets[]. An array containing a list of all applets in the document
-
embeds[]. An array containing a list of all embedded objects in the document
-
forms[]. An array containing a list of all forms in the document
-
images[]. An array containing a list of all images in the document
-
links[]. An array containing a list of all links in the document
-
plugins[]. An array containing a list of all plug-ins in the document
Other document object properties enable you to affect appearance:
-
bgColor. Specifies the document background color
-
fgColor. Specifies the color of document text
-
linkColor. Specifies the color of links
-
alinkColor. Specifies the color of active links
-
vlinkColor. Specifies the color of visited links
Here is a partial list of other useful document properties:
-
cookie. Lets you get and set cookie values
-
lastModified. A string that shows the date and time at which the document was last changed
-
referrer. A string showing the URL the user came from
-
title. A string containing the contents of the HTML <TITLE> tags
-
URL. A string containing the document's URL
The following example demonstrates the use of two document properties. The first statement in the script prints the title located in the HTML <TITLE> tags, using the document.title property. The second statement displays the last modification date and time for the page, using the document.lastModified property. Figure 3.12 shows the results of loading this example in Netscape Communicator.
Figure 3.12. Displaying properties of the document object
<HTML> <HEAD> <TITLE>Script 3.7 - Setting the Modification Date and Time</TITLE> </HEAD> <BODY> <SCRIPT LANGUAGE="JavaScript" TYPE="Text/JavaScript"> <!-- Start hiding JavaScript statements document.write("<B>Document Title:</B> " + document.title + "<BR>"); document.write("<B>Last Modified on:</B> " + document.lastModified); // End hiding JavaScript statements --> </SCRIPT> </BODY> </HTML> The form Object
Later this afternoon, I will dedicate a substantial portion of text to exploring the control of forms using JavaScript. Consider the information provided in this section to be a sneak preview of the form object.
The document object's forms[] array maintains a list of every form on a page, starting with form[0] and incrementing by 1 for each additional form. You can refer to individual forms using their forms[] array index number or by name.
For example, the following code creates a form called form1 that contains a single button:
<FORM NAME="form1"> <INPUT TYPE="button" NAME="backButton" VALUE="Back" onClick="window.back()"> </FORM>
Assuming that this is the only form on the page, you can refer to it either as document.forms[0] or as document.form1 . Forms can contain many elements, such as text boxes and buttons. To manage these form elements, each form object contains its own array, named elements[] . The first element in the form is stored as element[0] , the second element is stored as element[1] , and so on.
The location Object
The location object is relatively simple. Its properties contain information about its own URL. For example, location.href specifies the URL of the page, and location.pathname specifies just the path portion of the URL. If you make changes to the location object, the browser automatically attempts to load the URL again.
The location object has just two methods: The reload() method enables you to force a reload of the page, and replace() lets you specify a new URL to load. Because the replace() method writes a new entry to the history list on top of the current entry, this method prevents the user from using the browser's Back button to return to the previous page.
The following script shows how you can use the location object to force the browser to reload the current page or to load a new URL. First, the script defines a variable called myUrl and sets it equal to the value of location.href (that is, to the URL of the current page).
Then it defines a form with two buttons. The onClick event handler has been assigned to the first button. When the user clicks on this button, the location.replace() method instructs the browser to load http://www.netscape.com. When the user clicks on the second button, the location.reload() method instructs the browser to reload the current Web page. Figure 3.13 shows the result of loading this example.
Figure 3.13. Using the location object to control browser navigation and page reload
<HTML> <HEAD> <TITLE>Script 3.8 - Working with the location object</TITLE> </HEAD> <BODY> <SCRIPT LANGUAGE="JavaScript" TYPE="Text/JavaScript"> <!-- Start hiding JavaScript statements myUrl= location.href; document.write("myUrl = " + myUrl + "<BR>"); // End hiding JavaScript statements --> </SCRIPT> <FORM NAME="form1"> <INPUT TYPE="button" VALUE="go to www.netscape.com" onClick="location.replace('../www.netscape.com/default.htm')"> <INPUT TYPE="button" VALUE="Reload this page" onClick="location.reload()"> </FORM> </BODY> </HTML> The history Object
The history object maintains a list of URLs that the browser has visited since it began its current session. One useful property of this object is the length property, which you can access using the following syntax:
history.length
The history object has three methods:
-
The back() method loads the previously visited URL in the history list. This is the same as clicking on the browser's Back button.
-
The forward() method loads the next URL in the history list. This has the same effect as clicking on the browser's Forward button.
-
The go() method loads the specified URL in the history list. For example, history.go(4) loads the URL four entries ahead in the history list, history.go(-4) loads a URL four entries back in the history list, and history.go(0) reloads the current URL.
The following example demonstrates the use of the history object's back(), go() , and forward() methods. It defines a form with three buttons, each of which is assigned one of the methods. The onClick event handler is used to associate one of the methods with each button.
<HTML> <HEAD> <TITLE>Script 3.9 - Using History Object Methods for Navigation</TITLE> </HEAD> <BODY> <FORM NAME="form1"> <INPUT TYPE="button" VALUE="Back" onClick="history.back()"> <INPUT TYPE="button" VALUE="Reload" onClick="history.go(0)"> <INPUT TYPE="button" VALUE="Forward" onClick="history.forward()"> </FORM> </BODY> </HTML>
Figure 3.14 shows the results of loading this example using Internet Explorer. Clicking on the three form buttons has the same effect as clicking on the Back, Forward, and Reload buttons on the browser's toolbar.
Figure 3.14. Adding navigation buttons to your Web pages
The navigator Object
The navigator object is a top-level object like the window object. This means that the navigator object is not below any other object in the object hierarchy. It contains information about the browser that loaded the Web page. Both Netscape Navigator and Internet Explorer support this object, even though Internet Explorer's use of the object might seem a little funny . Some of the useful properties of the navigator object include the following:
-
navigator.appCodeName . Contains the code name of the browser
-
navigator.appName . Contains the name of the browser
-
navigator.appVersion . Contains the version number of the browser
Your scripts can use the values of these properties to determine the browser (and its version number) that is loading the Web page. You can then use this information to direct the browser to a JavaScript you have written to work with that particular browser.
The following example shows you how to create variables and assign them the values of navigator object properties. This script then prints the values of the variables. However, you could add additional logic to this script to interrogate the value of these variables and then direct the user's browser to a Web page you have designed to work with that particular browser.
<HTML> <HEAD> <TITLE>Script 3.10 - Displaying navigator object properties </TITLE> </HEAD> <BODY> <SCRIPT LANGUAGE="JavaScript" TYPE="Text/JavaScript"> <!-- Start hiding JavaScript statements document.write("<B>navigator.appCodeName = </B>" + navigator.appCodeName + "<BR>"); document.write("<B>navigator.appName = </B>" + navigator. appName + "<BR>"); document.write("<B>navigator.appVersion = </B>" + navigator.appVersion + "<BR>"); // End hiding JavaScript statements --> </SCRIPT> </BODY> </HTML> Figure 3.15 shows the result when I loaded this script in Netscape Communicator.
Figure 3.15. Viewing browser information
| [ LiB ] |
EAN: 2147483647
Pages: 84