Platinum Edition Using HTML 4, XML, and Java 1.2
(Publisher: Macmillan Computer Publishing)
Author(s): Eric Ladd
ISBN: 078971759x
Publication Date: 11/01/98

CHAPTER 19
The Web Browser Object Model

by Jim O'Donnell

In this chapter

Web Browser Object Hierarchy and Scoping 462

The window Object 463

The location Object 465

The history Object 466

The document Object 468

JavaScript Object Arrays 470

The link, area, and anchor Objects 472

The form Object 473

The image Object 476

JavaScript Objects 479

In Chapter 18, “Introduction to JavaScripting,” you learned the basics of JavaScript—its syntax, control structures, and how to use it to access and manipulate objects. To be useful, however, something to manipulate is needed. How does JavaScript (or any other scripting language, for that matter) interact with your Web browser?

The answer is the Web Browser Object Model. Each script-compatible Web browser, mainly Netscape Navigator and Microsoft Internet Explorer, exposes a number of objects that can be used to control and interact with the browser. The sum total of these objects is the browser’s object model.

As you would expect, the object models that Netscape and Microsoft have developed for their Web browsers are not completely compatible. Not only do differences exist between the models from the two vendors, but each revision of their Web browsers also differs from the last—they are largely backward compatible but include a number of new capabilities. This chapter examines those elements of the Web Browser Object Model that are (for the most part) common to all Netscape and Microsoft Web browsers, version 3 and higher. (Differences are noted in the discussion.) Later chapters discuss some of the major changes that have occurred with the advent of support for Cascading Style Sheets and Dynamic HTML.

•  See “Web Browser Object Model,” p. 596.

•  See “Internet Explorer Document Object Model,” p. 638.

Web Browser Object Hierarchy and Scoping

Figure 19.1 shows the hierarchy of objects that the Web browser provides and that are accessible to JavaScript. As shown, window is the topmost object in the hierarchy, and the other objects are organized underneath it. Using this hierarchy, the full reference for the value of a text field named text1 in an HTML form named form1 would be window.document.form1.text1.value.

FIGURE 19.1  Objects defined by the Web browser are organized in a hierarchy and can be accessed and manipulated by JavaScript.

Because of the object-scoping rules in JavaScript, however, it is not necessary to specify this full reference. Scoping refers to the range over which a variable, function, or object is defined. A variable defined within a JavaScript function, for instance, is only scoped within that function—it cannot be referenced outside the function. JavaScripts are scoped to the current window, but not to the objects below the window in the hierarchy. Thus, for the preceding example, the text field value could also be referenced as document.form1.text1.value.

As in Figure 19.1, all Web pages will have the window, navigator, document, history, and location objects. Depending on the contents of the Web page, other objects may also be defined. The remainder of this chapter reviews the objects shown in Figure 19.1—what information is defined for them (properties), what functions they can perform (methods), and the actions to which they can respond (events).

The window Object

The Web browser creates at least one window object for every document. Think of the window object as an actual window and the document object as the content that appears in the window. As briefly discussed in this chapter and then in more detail in Chapter 20, “Manipulating Windows and Frames with JavaScript,” one document can create more than one window, using the window object’s open() method.

window Object Properties

Your HTML documents can access and manipulate a number of attributes of the current Web browser window through the window object. Some of the more useful window object properties are the following:

•  closed—Specifies whether a window has been closed (Boolean).

•  defaultStatus—The default message that appears in the status line of the Web browser window (string).

•  length—The number of frames in the current window (integer).

•  name—The name of a window (string).

•  opener—When a window is opened using the open() method, the name of the window from which it was created is in this property (string).

•  parent—Refers to a window that contains a frameset (object).

•  self or top—Refers to the current window (object).

•  status—Can be used to read or set the contents of the Web browser’s status line (string).

In addition to the properties in the preceding list, remember that the document, history, and location objects are also properties of the window object.

window Object Methods

You can use JavaScript to create or operate on existing windows by using the methods associated with the window object. The following are some of these methods:

•  alert(string)—Puts up an alert dialog box and displays the message specified in string. Users must dismiss the dialog box by clicking the OK button before the Web browser will enable them to continue.

•  blur()—Removes the focus from the specified window.

•  clearTimeOut(timerID)—Clears the timer function with ID timerID (see the setTimeOut() method in this list).

•  close()—Closes the specified window.

•  confirm(string)—Puts up a confirmation dialog box with two buttons (OK and Cancel) and displays the message specified in string. Users can dismiss the dialog box by clicking Cancel or OK; the confirm function returns true if users click OK and false if they click Cancel.

•  eval(string)—Evaluates string as JavaScript code and returns the result.

•  focus()—Puts the focus on the specified window.

•  open(arguments)—Opens a new window.

•  prompt(string,[inputDefault])—Opens a prompt box, which displays string as a prompt and asks the user for input. If inputDefault is specified, it is shown as the default value of the prompt box.

•  scroll(x,y)—Scrolls the window to the given x and y coordinates.

•  setTimeOut(expression,msec)—Evaluates expression after the specified number of milliseconds have passed. This method returns a timer ID that can be used by clearTimeOut.