12.2 Opening and Closing Windows

Earlier in this chapter we learned about the Window.open() and Window.close() methods that open and close browser windows. As you'll recall, the first argument to the open() method specifies a URL to be loaded into the new window, or the empty string if the window should be blank. The second argument is the name for the window. In Navigator, this second argument is optional, but it is required by Internet Explorer 3.0.

The open() method also has an optional third argument that we haven't seen yet. This third argument is a string that contains a comma-separated list of "features" for the new window. These "features" specify whether the window will have a menu bar, whether it will display a toolbar, whether it will be resizable, and so on. The features may also specify what the width and height of the window will be. If you do not specify this third argument, you'll get a full-size window with all the standard features. If you do specify the argument, you get only the features you specify. For example, you could use a line like the following to open a 400x300 window with a location field and a status bar:

smallwin = window.open("", "small", "location,status,width=400,height=300");

One common reason to open new browser windows with reduced sizes and reduced feature sets is to create "dialog boxes" that are more complex than those available through alert() and related methods. Figure 12.2 shows such a "dialog box" in a small browser window.

Example 12.2 shows the code used to create the "dialog box" of Figure 12.2. This example is a function that serves as an error handler. This handler is invoked when the JavaScript interpreter detects an error in code it is executing. The function we define here creates a new window and dynamically generates an HTML document containing details about the error and about the platform the error occurred on, using an HTML form designed to be submitted via email (which provides a way for end users to automatically mail bug reports to a program's author).

<script>
// a variable we use to ensure that each error window we create is unique
var error_count = 0;
// Define the error handler. It generates an HTML form so
// the user can report the error to the author.
function report_error(msg, url, line)
{
   var w = window.open("",                    // URL (none specified)
                       "error"+error_count++, // name (force it to be unique)
                       "resizable,status,width=625,height=400"); // features
   var d = w.document;    // We use this variable to save typing!
   // Output an HTML document, including a form, into the new window.
   d.write('<DIV align=center>');
   d.write('<FONT SIZE=7 FACE="helvetica"><B>');
   d.write('OOPS.... A JavaScript Error Has Occurred!');
   d.write('</B></FONT><BR><HR SIZE=4 WIDTH="80%">');
   d.write('<FORM ACTION="mailto:david@ora.com" METHOD=post');
   d.write(' ENCTYPE="text/plain">');
   d.write('<FONT SIZE=3>');
   d.write('<I>Click the "Report Error" button to send a bug report.</I><BR>');
   d.write('<INPUT TYPE="submit" VALUE="Report Error">&nbsp;&nbsp;');
   d.write('<INPUT TYPE="button" VALUE="Dismiss" onClick="self.close()">');
   d.write('</DIV><DIV align=right>');
   d.write('<BR>Your name <I>(optional)</I>: ');
   d.write('<INPUT SIZE=42 NAME="name" VALUE="">');
   d.write('<BR>Error Message: ');
   d.write('<INPUT SIZE=42 NAME="message" VALUE="' + msg + '">');
   d.write('<BR>Document: <INPUT SIZE=42 NAME="url" VALUE="' + url + '">');
   d.write('<BR>Line Number: <INPUT SIZE=42 NAME="line" VALUE="' + line +'">');
   d.write('<BR>Browser Version: ');
   d.write('<INPUT SIZE=42 NAME="version" VALUE="'+navigator.userAgent + '">');
   d.write('</DIV></FONT>');
   d.write('</FORM>');
   // Remember to close the document when we're done.
   d.close();
   // Return true from this error handler, so that JavaScript does not
   // display its own error dialog.
   return true;
}
// Before the event handler can take effect, we have to register it
// for a particular window.
self.onerror = report_error;
</script>
<script>
// The following line of code causes the error that creates the dialog 
// box shown in the accompanying figure.
self = null;
</script>

Example 12.2 demonstrates a number of important techniques for programming with windows. First, of course, it shows how you can create a window with reduced size and few extraneous features. It also shows how this window can close itself when the user clicks the "Dismiss" button. Perhaps most important, it demonstrates the fundamentally important technique of using JavaScript code running in one window to dynamically create an HTML document in another window. It does this using the Document.write() method, of course, and it uses that method to create a relatively complex HTML form in the new window. The details of the form are not particularly important here--we'll study the Form object and form elements in Chapter 17, Forms and Form Elements--what is important is the way that the form is dynamically created.

In addition to the above techniques, Example 12.2 also demonstrates the use of the Window.onerror() event handler, and in fact, the example consists primarily of an onerror() event handler. This event handler is new in Navigator 3.0--it is invoked by JavaScript when any sort of error occurs in the JavaScript interpreter. The handler is passed three arguments that specify the error message, the document it occurred in, and the line number it occurred at. It can use these arguments to handle the error any way it chooses. If the handler returns true, as it does in this example, then JavaScript will not display its own error message dialog. Because this event handler is passed arguments, there is no appropriate syntax for defining it as the value of an HTML attribute. For this reason, it must be defined by assigning a function to the onerror property of a window, in the same way that you would define a method of an object.