Multiple Windows and Frames (JavaScript: The Definitive Guide, 4th Edition)

13.11.3. JavaScript in Interacting Windows

Recall what we learned in Chapter 12: the Window object serves as the global object for client-side JavaScript code, and the window serves as the execution context for all JavaScript code it contains. This holds true for frames as well: every frame is an independent JavaScript execution context. Because every Window object is its own global object, each window defines its own namespace and its own set of global variables. When viewed from the perspective of multiple frames or windows, global variables do not seem all that global, after all!

Although each window and frame defines an independent JavaScript execution context, this does not mean that JavaScript code running in one window is isolated from code running in other windows. Code running in one frame has a different Window object at the top of its scope chain than code running in another frame. However, the code from both frames is executed by the same JavaScript interpreter, in the same JavaScript environment. As we've seen, one frame can refer to any other frame using the frames, parent, and top properties. So, although JavaScript code in different frames is executed with different scope chains, the code in one frame can still refer to and use the variables and functions defined by code in another frame.

For example, suppose code in frame A defines a variable i:

var i = 3;

That variable is nothing more than a property of the global object -- a property of the Window object. Code in frame A could refer to the variable explicitly as such a property with either of these two expressions:

window.i
self.i

Now suppose that frame A has a sibling frame B that wants to set the value of the variable i defined by the code in frame A. If frame B just sets a variable i, it merely succeeds in creating a new property of its own Window object. So instead, it must explicitly refer to the property i in its sibling frame with code like this:

parent.frames[0].i = 4;

Recall that the function keyword that defines functions declares a variable just like the var keyword does. If JavaScript code in frame A declares a function f, that function is defined only within frame A. Code in frame A can invoke f like this:

f( );

Code in frame B, however, must refer to f as a property of the Window object of frame A:

parent.frames[0].f( );

If the code in frame B needs to use this function frequently, it might assign the function to a variable of frame B so that it can more conveniently refer to the function:

var f = parent.frames[0].f;

Now code in frame B can invoke the function as f( ), just as code in frame A does.

When you share functions between frames or windows like this, it is very important to keep the rules of lexical scoping in mind. A function is executed in the scope in which it was defined, not in the scope from which it is invoked. Thus, to continue with the previous example, if the function f refers to global variables, these variables are looked up as properties of frame A, even when the function is invoked from frame B.

If you don't pay careful attention to this, you can end up with programs that behave in unexpected and confusing ways. For example, suppose you define the following function in the <head> section of a multiframe document, with the idea that it will help with debugging:

function debug(msg) {
    alert("Debugging message from frame: " + name + "\n" + msg);
}

The JavaScript code in each of your frames can refer to this function as top.debug( ). Whenever this function is invoked, however, it looks up the variable name in the context of the top-level window in which the function is defined, rather than the context of the frame from which it is invoked. Thus, the debugging messages always carry the name of the top-level window, rather than the name of the frame that sent the message, as was intended.

Remember that constructors are also functions, so when you define a class of objects with a constructor function and an associated prototype object, that class is defined only for a single window. Recall the Complex class we defined in Chapter 8, and consider the following multiframed HTML document:

<head>
<script src="Complex.js"></script>
</head>
<frameset rows="50%,50%">
  <frame name="frame1" src="frame1.html">
  <frame name="frame2" src="frame2.html">
</frameset>

JavaScript code in the files frame1.html and frame2.html cannot create a Complex object with an expression like this:

var c = new Complex(1,2);  // Won't work from either frame

Instead, code in these files must explicitly refer to the constructor function:

var c = new top.Complex(3,4);

Alternatively, code in either frame can define its own variable to refer more conveniently to the constructor function:

var Complex = top.Complex;
var c = new Complex(1,2);

Unlike user-defined constructors, predefined constructors are automatically predefined in all windows. Note, however, that each window has an independent copy of the constructor and an independent copy of the constructor's prototype object. For example, each window has its own copy of the String( ) constructor and the String.prototype object. So, if you write a new method for manipulating JavaScript strings and then make it a method of the String class by assigning it to the String.prototype object in the current window, all strings in that window can use the new method. However, the new method is not accessible to strings defined in other windows. Note that it does not matter which window holds a reference to the string; only the window in which the string was actually created matters.

<head> <title>Colored Frames</title> <script> function setcolor(w) { // Generate a random color var r = Math.floor((Math.random( ) * 256)).toString(16); var g = Math.floor((Math.random( ) * 256)).toString(16); var b = Math.floor((Math.random( ) * 256)).toString(16); var colorString = "#" + r + g + b; // Set the frame background to the random color w.document.write("<body bgcolor='" + colorString + "'></body>"); w.document.close( ); // Schedule another call to this method in one second. // Since we call the setTimeout( ) method of the frame, the string // will be executed in that context, so we must prefix properties // of the top-level window with "parent.". w.setTimeout('parent.setcolor(parent.' + w.name + ')', 1000); // We could also have done the same thing more simply like this: // setTimeout('setcolor(' + w.name + ')', 1000); } </script> </head> <frameset rows="33%,33%,34%" cols="33%,33%,34%" onload="for(var i = 0; i < 9; i++) setcolor(frames[i]);"> <frame name="f1" src="javascript:''"><frame name="f2" src="javascript:''"> <frame name="f3" src="javascript:''"><frame name="f4" src="javascript:''"> <frame name="f5" src="javascript:''"><frame name="f6" src="javascript:''"> <frame name="f7" src="javascript:''"><frame name="f8" src="javascript:''"> <frame name="f9" src="javascript:''"> </frameset>

13.11. Multiple Windows and Frames

13.11.1. Relationships Between Frames

Figure 13-4. Relationships between frames

13.11.2. Window and Frame Names

13.11.3. JavaScript in Interacting Windows

13.11.4. Example: Colored Frames

Example 13-7. A frame color animation