Handling Windows and Frames Across Browsers

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.

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>