JavaScript and Frames

In JavaScript, each frame acts as a full-fledged window object. A frame consists of a complete set of browser objects, including its own document object, status object (which is a bit tricky), and so forth.

self

The self object is equivalent to the window one. The background color of a document in a single-frame window can be referenced in one of the following fashions:

window.document.bgcolor
self.document.bgcolor
document.bgcolor

Although it is technically possible to combine multiple references within a single-frame window, as in window.self.document.bgcolor, you should use such references only in a multiple-frame window.

Suppose you have a multiple-frame document, and you want to reference an object that belongs to a specific frame from that same frame. One option is to simply specify that object using a common syntax. Specifying the self object, however, can make the script crystal clear and its debugging much easier. You can use the following code, for instance, to display the title of that frame:

alert(self.document.title)

In summary, when the HTML document appears in one frame of a multiple-frame document, it is recommended to precede all window object references with the self object.

Note that you can also precede all function calls with the self object specification:

self.functionName()

parent

A script running in a frame of a multiframe document can reference objects or properties of its parent document (the one that sets the frames) via the parent property.

Figure 26-6 shows the exact relations between a frame-setting document and its frames.

Figure 26-6.  The structure of a multiple-frame window.

Notice that the window object of the frame-setting document is equivalent to the window.parent (or self.parent or parent) of a document in one of the frames. In a way, since it points to a higher level of hierarchy, the parent property may seem to violate the object hierarchy rules.

A child window can also call a function of the parent window. The reference would be as follows:

parent.functionName([arguments])

The parent property of a frame’s window object does not always point to the top-level window. If one of the children of the top-level window is also a frame-setting window, then you wind up with three levels of hierarchies. The parent property of the bottom level of hierarchy points to the second one. Figure 26-7 demonstrates this concept.

Figure 26-7.  The “youngest” child’s parent is not the top-level window.

Notice that the top-level window in Figure 26-7 can be referenced from the “youngest” child as window.parent.parent. We recommend that you draw such flowcharts when you design a site with deeply nested frames. (See the section “Nested Frames,” earlier in this chapter, for a discussion of the different types of nesting.)

top

The window object’s top property refers to the topmost window in a JavaScript hierarchy. For a single-frame window, top is equivalent to window, which in turn is equivalent to self and parent. In a multiple-frame window, the top object always reflects the topmost window that defines the first frameset. In a window that contains several frames, where at least one of the frames also contains a frameset, the top property of all window objects (including all generations in the hierarchy) refers to the window with the first frameset. In terms of flowcharts, the top property always refers to the highest rectangle.

Take another look at Figure 26-7. The top-level window can be referenced from the “youngest” child as parent.parent, top, window.top, or self.top.