advertisement -- please support sponsors

frames, windows:
sharing variables between windows and frames

I am having a real hard time figuring out how to pass a randomly generated variable from one frame to the next....

Suppose you define a variable called "foo" with the following code:

foo = 1234;

Whenever a variable or method is expressed without the object to which it belongs, the containing object is assumed to be the document's window object. Thus, the line of code shown above defines the value of window . foo, and the expressions foo and window . foo are synonymous.

The trick to accessing variables between windows (or frames), then, is to obtain a reference to the window (or frame), and then to access the variable as a property of that object.

accessing variables from one window to another

For example, if one window spawns another window using the window . open () method, the first window should store the return value in a variable, as illustrated below:

child = open ("popup.html");

This is important because the value returned by open () is a reference to the new window. With this reference, the first window can access the second window's functions and variables, simply by treating them as properties of the window.

Example: parent accessing child's variable

child . variable_name

Similarly, a child window can access its parent's variables, too, as long as the child has a reference to its parent. And it always does, because all window objects have a property called "opener," which is equal to the parent window, if one exists, or to null, if there is no parent.

Example: child accessing parent's variable

opener . variable_name

accessing variables from one frame to another

Now, sharing variables between frames is not really any different than sharing them between windows. All you need is a reference to the frame object.

For example, if a window has two frames, the first frame can access a variable in the second frame using the following expression:

Example: first frame accessing second frame's variable

parent . frames [1] . variable_name

Similarly, the second frame can access variables in the first frame through the following expression:

Example: second frame accessing first frame's variable

parent . frames [0] . variable_name

As illustrated in these examples, frames can obtain references to neighboring frames through the parent window's frames [] property. Don't forget that the first frame in this array is indexed with 0, not 1.

waiting until variables are defined

When you use the techniques described in this article to share variables between windows or frames, you should make sure that the variables will not be accessed before they are defined. Failure to prevent premature access can result in embarrassing JavaScript errors. For example, if a parent window spawns a child window, the parent window should not access the child window's variables until the child window has finished loading.

There are several ways to accomplish this. One technique is to define a flag variable, such as "loaded," that signals whether the document is ready. This might be accomplished with the following code:

Example: using a flag to indicate readiness

<html>
<head>
<script>
loaded = false;
</script>
</head>
<body onLoad="loaded = true;">
  .
  .
  .
</body>
</html>

If this code were placed in a pop-up window, for example, then the parent window could poll the pop-up window's loaded value in order to determine whether the child is ready for interaction.

A major drawback of the flag variable approach is that the parent window must continually poll the pop-up window's flag value until the value indicates that the child is ready. A more elegant solution uses "callback functions," or special functions in the parent that are called by the child when the child is ready. In the child window's onLoad event handler, for example, you can insert a call to a function in its parent, which in turn causes the parent to "wake up" and begin interacting with the child. The child window's code might look like this:

Example: using a callback function to indicate readiness

<html>
<body onLoad="opener . start_interacting ();">
  .
  .
  .
</body>
</html>

Of course, the code in the parent that interacts with the child is contained in a function called "start_interacting ()." This code will begin running at precisely the same moment that the child window finishes loading.

Charlton Rose
28 August 1997