11.3 Windows and Frames

While Navigator (and other browsers) can display multiple HTML pages in multiple browser windows, it can also display multiple pages within a single window by using frames--a feature that allows a single browser window to be divided horizontally or vertically (or both) into individual sections that each display a separate HTML document. Although frames are not strictly windows in their own right, they behave like windows in many ways, and in JavaScript, each frame is represented with a Window object. Thus the Window class can represent both top-level browser windows and frames within a browser window (and frames within other frames, of course).

Each Window object has a frames[] array property that contains references to each of the frames (if any) that the window contains. The frames.length property specifies the number of frames in the array. Also, each Window object has a parent property that refers to the window or frame that contains the object (top-level browser windows have their parent property set to themselves). Thus, if a browser window contains two frames, and JavaScript code is running in the first frame, that code refers to the first frame implicitly or with the self or window properties. To refer to the second frame, that code could use the expression parent.frames[1].

The top property is similar to the parent property, but differs for frames that are recursively contained within other frames. The top property always contains a reference to the top-level browser window that contains the frame, which, in the recursive frames case, is not the same as the parent of the frame. Figure 11.1 illustrates the relationship between frames and windows, and shows a schematic representation of the frames[] array, and the parent, top, window, and self properties.

Top-level windows and frames have a significantly different representation on the screen, so it would seem that they would have a different representation in JavaScript. As we've seen, however, they are both represented by the Window object, and have the same properties and methods. As it turns out, the practical differences between top-level windows and frames really are quite minor:

• For top-level windows, the parent and top properties are simply references to the window itself; these properties are really useful only when used with frames, or when used to distinguish a frame from a top-level window; you can check for a top-level window with if (parent ==index.html self).

• The alert(), confirm(), and prompt() methods pop up dialog boxes. While these methods may be invoked through any Window object, including those that represent frames, the dialog boxes always appear centered over the top-level window, not over individual frames.

• Setting the status or defaultStatus properties of a top-level window sets the text that appears in the browser status line. When these properties are set for a frame, the status line only displays the specified text when the mouse is over the frame.