Web DevCenter    
 Published on Web DevCenter (http://www.oreillynet.com/javascript/)
 See this if you're having trouble printing code examples


Handling Windows and Frames Across Browsers

by Joao Prado Maia
07/13/2001

Creating and handling multiple windows through JavaScript is an important feature on many of today's web sites. More than ever we see sites that have some sort of window handling to deliver enhanced functionality, such as CNN using pop-up windows to allow the user select different content by his or her location of interest.

This article aims to show the properties and methods of the window object while giving practical advice on how to implement applications that make use of that functionality. A simple example of the creation of a window would be useful:

<script language="JavaScript">
<!--
function createWindow()
{
  var win_URL = "index.html";
  var win_Name = "_New";
  var win_Features = "width=400,height=200,top=30,left=30,resizable=no, scrollbars=yes,toolbar=no,location=no,menubar=no,status=no";

  // open the window with the variables defined above
  var test_Win = window.open(win_URL, win_Name, win_Features);
  test_Win.focus();
}
//-->
</script>

That code will open a 400 x 200 pixel window with the URL specified. The variable win_Name is the actual name of the window, so it can be used as a target for HTML forms, for example. This is quite useful for completely dynamic forms that need a "preview" window. In this case, you would need to change the target of the form dynamically to post the information to a different window. More on this later on the article though.

The textbook definition of the open() method of the window object is as follows:

open(URL, windowName[, windowFeatures])

This method returns a window object, so if you ever need to communicate with this newly created subwindow, or will need to reference this window later in your code, it is best to save the returned value in a variable. You probably noticed that the windowFeatures parameter is optional, and is used to set the actual features of the subwindow, like setting the height and width.

Comment on this articlePost your questions and comments about JavaScript windows here!
Post your comments

Common applications for subwindows

One of the reasons to use subwindows on web sites is to create special features and sections of a web sites, with sections that are not as crucial linked to through subwindows. One of the best examples I can think of is the "Vote" subsection/application of CNN.com.

They have a large front page with links to all the important headlines and stories that generate traffic for them. They obviously want to keep their users on the front page with those stories right under their noses, so they designed the Vote application to create a new subwindow and post the form to this window.

In this way, CNN.com keeps users on the front page of the web site while still getting its input on that certain poll. The same functionality could be added to Slashdot.org, but because this community portal is aimed at the general Unix developers, having a JavaScript-only application like that could mean support problems. This type of decision is very specific, so try to think of the terms of your audience before you begin development.

The same content might be a good idea for a login form, so a subwindow could be used to show error messages or special sections for correctly logged in users.

Referencing parent windows from subwindows

Sometimes subwindows generated by JavaScript need to change something on the parent window, the window that created this subwindow. It is quite common to see subwindows redirect the user on the parent window, or even reload the page to change some pre-determined text.

The parent window might be referenced by the opener object. Some examples are shown below:

<script language="JavaScript">
<!--
function redirectParent(url)
{
  window.opener.location.href = url;
}

function reloadParent()
{
  window.opener.location.href = window.opener.location;
}
//-->
</script>


Handling subwindows and frames

Handling frames is somewhat different than handling a single document window because you need to specify which frame you want to use. Just like on forms, you can name the frames and reference them by that name instead of by the number. On a simple document split in two vertical frames, referencing these frames would be something like this:

+----------------- top (parent)----------------------+

+---------------------+-------------------------------+
|     frames[0]       |         frames[1]             |
|       or            |            or                 |
|  parent.menu_frm    |      parent.index_frm         |
|                     |                               |
+---------------------+-------------------------------+

<frameset cols="150,*">
  <frame name="menu_frm" src="menu.html">
  <frame name="index_frm" src="index.html">
</frameset>

You can refer to it from another frame such as parent.index_frm, or code>top.frames[1], if that frame is the second one in the stack.

All of this seems very easy, but try to reference a specific frame from a subwindow created on the left frame of the document above. From this subwindow, you want to open a different page on then index_frm frame of the top-level window. Here's how to do this:

<script language="JavaScript">
<!--
// Small function to load an URL in the top level 
// window, on the selected frame
// Note: this function runs from the Subwindow 
// generated on the other frame of the top level 
// window (named 'menu_frm' in this example)
function loadParentFrame(url)
{
  window.opener.parent.frames[1].location.href = url;
  // an alternative to the same statement above
  window.opener.parent.index_from.location.href = url;
}
//-->
</script>

You can view an example here (or you can download a Zip archive of these files).

Common compatibility issues

Some of the most common problems I experienced while developing applications that make use of JavaScript were compatibility issues with using JavaScript functions to validate forms in a "wizard" type utility. Users would go from step 1 to step 8 by filling up forms and on each step a custom function would check the values for any problems, and if everything was correct, submit the form to the next step.

This entailed using buttons on the HTML forms and calling the JavaScript functions to validate the form. If the form contents were not valid, the script would show an error message and ask the user to fix the problematic field.

<script language="JavaScript">
<!--
function checkForm()
{
  var check = this.document.form_name;
  if (isWhitespace(check.field_name.value)) {
      alert("Please enter the required text.");
      check.field_name.focus();
      return false;
  }
  // if the code got up to here, we can submit the form
  check.submit();
}
//-->
</script>

So the form validation code is something like that, but the real implementation is up to you. You would need an HTML button like this for the code to work:

Related Reading

JavaScript: The Definitive Guide, 4th EditionJavaScript: The Definitive Guide, 4th Edition
By David Flanagan
Table of Contents
Index
Sample Chapter
Full Description

<input type="button" name="button1" value="Submit Form" onClick="javascript:checkForm();">

This is the only piece of code that works flawlessly under all versions of Microsoft Internet Explorer, Netscape Navigator, and Mozilla. I tried making the form validation triggered by a onSubmit event, but Netscape was submitting the form even if you tried to return false; to it.

Most of the time, advanced JavaScript functions are custom-made, so it's a good idea have several copies of Netscape and IE to test your scripts. Nothing is more important than unit-testing your scripts in a systematic way. It is not easy or fun, but you will surely have reliable code.

I hope this article could help on some of the issues relating to JavaScript handling to multiple windows and frames and also some form validation tips.

Cheers!

Joao Prado Maia is a web developer living in Houston with more than four years of experience developing web-based applications and loves learning new technologies and programming languages.


Return to the JavaScript and CSS DevCenter.

Copyright © 2009 O'Reilly Media, Inc.