Controlling Windows with JavaScript

I. The Window.open() Method

Every Web page opens in a window, and every window has a corresponding JavaScript window object. You can open a new window by using the open() method of that object, thus:

    window.open("content.htm","windowName","width=500,
    height=500,left=10,top=10");

In this example, "content.htm" is the filename (or pathway or URL) of a Web page that is to be displayed in the new window and "windowName" is an arbitrary designation for the new window.

Note that the next parameter of the open() method contains four elements within a single set of quotation marks. These set the height and width of the window as well as the position of its left and top edges.

You can add other features to that third, omnibus parameter, including toolbar=yes/no, location=yes/no, directories=yes/no, status=yes/no, and resizable=yes/no. The first four of these features refer to various controls that can be associated with windows. The last one allows the user to resize the window if it is set to "yes."

If you want to refer to the new window in subsequent JavaScript instructions, for instance, to close it, it is a good idea to invoke the window by name, as in this example:

    arf = window.open("dog.htm","arf","width=500,
    height=500,left=10,top=10");

Most references suggest giving the window a name in the parameter list as well as a name by invocation, though in my experience only the invocation works, as in this case:

    arf.close();

This method closes the window named arf.

If you're very precise about these things, it may strike you as confusing that we are able to open a window and also name it at the same time, in both cases using the window.open() method.

Actually, the method operates on two different instances of the JavaScript window object. The first instance, the one that actually exectutes the open() method, is the original window in which the page containing the JavaScript functions resides. The open() method then creates a second window instance which is named and described as above. This second window is said to be the child of the first window, which is its parent.

II. How the Demo Page Works

In the demo page, a function is executed when the page loads. The function looks like this. The blank lines in the code example are strictly for readability.

  function noExit()
    {
      randX = Math.floor(Math.random()*600);
      randY = Math.floor(Math.random()*300);
	  
      window.open("blather.htm","blatherWindow",
      "menubar=no,width=250,height=150,resizable=no,
      left="+ randX + ",top="+ randY);
	  
      setTimeout("noExit()",5000);
    }

The window.open() method is basically the same as the standard example explained in Part I, except that the omnibus parameter containing left and top is interrupted twice and stitched together with concatenation operators (+). These interruptions let us insert variables as the values for left and top edge locations.

The variables randX and randY are given random values between 600 and 300 respectively. (We'll have more to say about random-number generation in later weeks.)

Finally note the setTimeout() method. We'll have more to say about this in later weeks as well. For the moment you only need to know that it imposes a 5-second delay after which the function noExit() calls itself. If you visit the demo page you'll see the exasperating effect of this instruction.

III. Browser Limitations

Every now and again we become aware of some feature, usually associated with JavaScript, that only exists in Netscape Navigator. Window placement is one such case. If you load the demo page in Netscape, each message window will appear at a different point on the screen. In Internet Explorer the window appears in a fixed position. Its content is refreshed every 5 seconds. If you close the original message window, a new one will appear within 5 seconds, this time at a random location; but the random appearance effect does not work in MSIE. Evidently Explorer does not fully implement window positioning.

If you can find a way around this problem, please post your solution to the listserv.

IV. Random Content in the Message Window

The random content that appears in the message window has nothing to do with window management, and since it depends on random number generation, a topic to be covered extensively later, I will not go into detail. If you'd like to see the relevant code, examine the page blather.htm in the windowPain directory.

VII. A More Practical Application

The demo discussed above is rather frivolous, but a secondary window can be more usefully applied as a navigation palette: a persistent set of links that can be used to navigate a large and complex Web site. Here's a second demonstration showing this technique.

The key to constructing a link palette is the ability to re-assign the location of a secondary window using JavaScript. That's done with a statement like this:

    opener.location = newPage.htm;

To see how this logic is applied in the example, view source from the demo page or download both the demo page (linksPage.htm) and the palette page (ravenLinks.htm) from the windowPain folder on Crow.

VI. Download

All the files for the two demos are stored in a directory called windowPain which you will find in the productionShare directory on Crow.