JavaScript Lesson 12
Managing Windows and Frames

This lesson is about how to access and target properties and values in one frame or window from another frame or window. To do this we need to understand the heirarchy of javascript objects. If you need to, go back to lesson 9 and do a quick review of the JavaScript Object Hierarchy. Go ahead, I'll wait.

Let's start this out by posing a problem: Suppose you have a web page with two frames on it and you want to open a pop up window from one frame and display a property that was typed into a form on the other frame.

Something like this example. Be sure to type a color in the textbox (red frame). Then select the "Click Here" button (blue frame).
The last example consists of four web pages -- a frameset called flintstone.html which contains two frame pages, the red one on the left is fred.html and the blue one on the left is called barney.html, and finally there is dino.html which is loaded in the pop-up window when you click the button. Here is a grapical representation of the layout of the pages:

The names of the html files are in the parentheses.

Let's go ahead and make these pages.

Type the following into CodeRunner below:

Save that file as flintstone.html

Now erase what you have in CodeRunner and make the following page:

Type the following into CodeRunner below:

<head>
<script>

function openpopup(){

dino = window.open("dino.html","dino","width=400,height=400");
dino.focus();

}

</script>
</head>
<body bgcolor=red text=white>

Open a Pop-Up Window by clicking here:

<br>
<form name=popup>

<input type=button value="Click Here" onclick=openpopup();>

</form>

</body>

Save that page as fred.html

Now, erase that and we'll make the next page:

Type the following into CodeRunner below:

<body bgcolor=blue text=white> Type in a color name into the space below:

<br>
<form name=colorform>
<input type=text name=colortext>
</form>

</body>

Save that as barney.html

Now we need to make the page that loads into the pop-up window, but first you should open up flintstone.html and make sure you have what the example has (the button won't work right untill we have the page that loads into the frame finished).

Let's make the page that loads into the pop-up window now:

Type the following into CodeRunner below:

<head>
<script>

thecolor = opener.top.barney.document.colorform.colortext.value;
this.document.bgcolor = thecolor;

</script>
</head>
<script>
this.document.write("<body bgcolor =" + thecolor + ">");
this.document.write("This page should be <form><input type=text value=" + thecolor +"></form>");
this.document.write("</body>");

</script>

Name this page dino.html

Let's analyse this code and try and understand it. We have four pages here. A frameset with two frames and a pop-up page. When the pop-up page dino.html loads we are going to get the value from barney.html held in the Text input called colortext in the Form called colorform. To access the value in barney.html from dino.html we need to back track through the object heirarchy. Here is a grapic representation of the frame and window heirarchy:

The names of the windows and frames (not the html filenames) are in parentheses. It is important to understand the difference between the frame name and the file name. I just happened to make the file names and the frame names in this example similar, but they don't have to be. Frames and windows are referenced by their names and not the file names that happen to be in them at the time.

Somehow we have to get from dino to barney to get the value. The line in dino.html that retrieves the value from the form in barney.html is ...

thecolor = opener.top.barney.document.colorform.colortext.value;

Notice the keywords opener and top. When a pop-up window is opened from a frame or a window that frame or window is always referenced as the opener from the pop-up window. So from dino we call opener which in this case is fred.

top is always the top most frameset in a window. So from fred (which we referenced from opener) we get to the parent frameset by using top. (We could also have used the keyword parent instead of top in this case.). Here is a graphical representation of the path:

opener.top.barney.document.colorform.colortext.value

At this point you should open your flintstone.html and make sure it works now that you understand how it works.

WARNING: If you choose to use the CodeRunner Preview, it won't work. Why? Well, because the prview window of your page is in a frameset itself too. There are two ways around this, you can open the page directly by using View Page button on the open from server dialog window. OR if you want to use the preview you can all the following temporarily to the object path for instance...

thecolor = opener.top.frames[0].barney.document.colorform.colortext.value;

You should now be able to figure out why this fixes the problem when you preview!

In the next part of this lesson we will list and describe all of the object keywords used for managing windows and frames.

Window and frame Keywords

Keyword	Description
top	The top most frameset in a window
parent	The parent frameset of a frame. This may or may not be the top most frameset.
self	The immediate frame or window a document is in.
this	Refers to the immediate object. Context dependent, if it used in the Head of a document then it refers to the frame, if it is in the body of a document then it refers to the document, if it is used in a form, then it refers to the form.
opener	Refers to the frame or window that opened the window the document is in.

See you at the next lesson.