|
|
Because JavaScript allows a programmer to create additional windows and frames, it must also provide a way to access variables and functions from any point in the window or frame hierarchy. The next three sections describe how to access data on child or parent windows and how to access data on frames.
It is very simple for a parent window to access the variables and code on a child window. When you use the window.open() method, a handle is returned that allows you to access the newly created window. This handle is useful for many tasks, including resizing, moving, closing, and accessing data on the new window.
Here is the syntax for accessing variables and functions on a child window:
windowHandle.variableName;
The child window function access syntax is as follows:
windowHandle.functionName( <parameter list> );
To illustrate the simplicity of this concept, here is a short example: <html>
<head>
<title>JavaScript Professional Projects
Accessing data on other windows</title>
</head>
<body>
<center>
<font size=6>JavaScript Professional Projects</font><br>
<font size=4>Chapter 9: Accessing data on other windows</font>
</center>
<br><br>
<br><br>
The value of 'theVariable' on the other page is <b>
<script language="JavaScript">
<!--
var otherPage = window.open( "other.html", "other" );
document.write( otherPage.theVariable );
// -->
</script> </b>.
</body>
</html>
And here is the code that makes up "other.html":
<html>
<head>
<script language="JavaScript">
<!--
var theVariable = 42;
// -->
</script>
</head>
<body>
<code>
In this window, the value of 'theVariable' is <b>
<script language="JavaScript">
<!--
document.write( theVariable );
// -->
</script>
</b>.
</code>
</body>
</html>
As you can see, it is very easy to access data on a child window.
It is equally easy to access data on the parent window from the child window. The window.opener property is a pointer to the window that created the child window. The example above could be rewritten as:
<html>
<head>
<title>JavaScript Professional Projects -
Accessing data on other windows</title>
<script language="JavaScript">
<!--
var theVariable = 42;
// -->
</script>
</head>
<body>
<center>
<font size=6>JavaScript Professional Projects</font><br>
<font size=4>Chapter 9: Accessing data on other windows</font>
</center>
<br><br>
<br><br>
The value of 'theVariable' on this page is <b>
<script language="JavaScript">
<!--
var otherPage = window.open( "other.html", "other" );
document.write( theVariable );
// -->
</script>
</b>.
</body>
</html>
And here is the code that makes up "other.html":
<html>
<head>
</head>
<body>
<code>
The value of 'theVariable' on the parent window is <b>
<script language="JavaScript">
<!--
document.write( opener.theVariable );
// -->
</script>
</b>.
</code>
</body>.
</html>
Data on frames can be accessed by referencing the correct frame in the document.frames[] collection. Here is the syntax for doing so:
parent.frames[i].<variableName>
Frame function access syntax is as follows:
parent.frames[i].<functionName>( <parameter list> );
One operation that is very useful when working with frames is changing the document that is displayed within the frame. Because each frame is considered a window by the browser, you can change the document displayed in the frame by changing the value of its location property. Here is the syntax for doing so:
parent.frames[i].location = "new URL";
or
rent.frameID.location = "new URL"; (IE only)
It is important to remember that data on windows or frames may not be totally loaded by the time the parent window or frame tries to access it. To prevent premature access of data—and embarrassing JavaScript errors—you can take one of two actions. One action is to create a flag variable in the child window or frame that indicates the readiness of the data contained within. Here is a partial example to illustrate:
<html>
<head>
<script language="JavaScript">
<!--
var loaded = false;
// -->
</script>
</head>
<body onLoad="JavaScript: loaded = true;">
...
</body>
</html>
Checking the variable loaded in the above example will indicate whether the data on the child window has fully loaded.
The second way to guarantee that the child has finished loading is with the use of a callback function. Here is another simple example to demonstrate:
<html> <head> </head> <body onLoad="JavaScript: opener.childLoaded();"> ... </body> </html>
This example will call the function childLoaded() on the window that opened it as soon as all the data on the child window has finished loading.
|
|