Learn Advanced JavaScript Programming

Table of Contents

The third argument of the window.open() method is a comma-separated list of window features, specified as a single string (enclosed in a single pair of quotes). (Be careful not to specify each feature as an independent argument of the window.open() method.) If you omit the window.open() method’s third argument, the window features default to those of a new window manually opened from the browser’s File menu. Any specification for the third argument value, including an empty string, turns off all unspecified attributes of the new window. Table 27-1 lists all window attributes you can control:

Table 27-1. The window.open() method attributes.


Attribute	Value	Description (Navigator)	Description (Internet Explorer)

`toolbar`	Boolean	Back, Forward, and other buttons in that row	Back, Forward, other buttons in that row, and Address field, displaying the current URL
`location`	Boolean	Field displaying the current URL	N/A (always defaults to the value of `toolbar`)
`directories`	Boolean	What’s new?, What’s cool?, and other buttons in that row	N/A (always defaults to the value of `toolbar`)
`status`	Boolean	Status bar at the bottom of the window	Status bar at the bottom of the window
`menubar`	Boolean	Menu bar at the top of the window (File, Edit, View, Go, etc.)	Menu bar at the top of the window (File, Edit, View, Go, etc.)
`scrollbars`	Boolean	Scrollbars if the document is larger than the window (no scrollbars if the document is smaller than the window)	N/A (always defaults to “yes”)
`resizable`	Boolean	Elements allowing resizing of window by dragging	N/A (always defaults to “yes”)
`width`	Pixels	Window’s width in pixels	Window’s width in pixels
`height`	Pixels	Window’s height in pixels	Window’s height in pixels

As is obvious from these major differences, Microsoft Internet Explorer and Netscape Navigator are designed differently. Here are a few minor distinctions:

Netscape Navigator requires that you either specify both the height and width of the new window, or do not specify them at all. Microsoft Internet Explorer works fine even if you specify only one of the dimensions.
IE’s toolbar includes the section beneath it, which you can alternate between a field displaying the location and fields displaying various directories. Navigator, on the other hand, has a separate attribute for each of these fields.

As menu bars are foreign to the Macintosh OS, the menubar option is not supported by browser windows on the Mac.

The attribute copyhistory is omitted from Table 27-1 because it is buggy and tends not to work on some browser-platform combinations. This attribute specifies if the originating window’s history list should be copied to the new window. If not specified, the history list of the new window starts from scratch.

As emphasized above, the third argument of the window.open() method is a single string. A call to this function can look like this:

var remote = open("http://www.yahoo.com", "win1",
"height=300,width=400,toolbar")

First, notice that there are no spaces between the attributes. Then, be aware that there are basically three ways to specify a value for a Boolean attribute (all attributes except for the window’s height and width):

Literally specifying an attribute’s name implicitly assigns it a true value. All nonspecified attributes default to false.
Explicitly assigning a Boolean literal to an attribute (e.g., toolbar=false, toolbar=true).
Explicitly assigning a binary digit to an attribute, resembling C++’s Boolean values (e.g., toolbar=0, toolbar=1).

You can use the window.open() method to create a customized alert box, for example. Example 27-1 shows a general function for this purpose.

<HTML>
<HEAD>
<TITLE>A custom "alert"</TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!--

function pop(height, width, content) {
  win = window.open("", "", "height=" + height + ",width=" + width)
  if (win != null) {
  win.document.open('text/html')
  win.document.write("<HTML><HEAD >;TITLE>JavaScriptAlert
   </TITLE></HEAD><BODY>")
  win.document.write(content)
  win.document.write("</BODY></HTML>")
  win.document.close()
  }
}

// -->
</SCRIPT>
</HEAD>
<BODY>
<FORM>
<INPUT TYPE="button" VALUE="custom alert"onClick="pop(75,250,'You
can use such windows instead of alert dialog boxes!')">
</FORM>
</BODY>
</HTML>

Example 27-1. A small window can replace the classic alert dialog box.

This alternative to the built-in window.alert() method gives you a way to get rid of the annoying “JavaScript Alert:” message under Netscape Navigator, to size the window as you like, and to display images in the window. Later in this chapter, we show how to keep the window in front of other ones and how to implement an OK button for closing the window.

Figures 27-4 and 27-5 show the windows generated by Example 27-1 under Navigator and IE, respectively.

Figure 27-4. A small window under Netscape Navigator for Windows 95.

Figure 27-5. A small window under Microsoft Internet Explorer at Windows 95.

An IE 3.0x Bug Workaround

A very bizarre bug in Internet Eplorer 3.0x is that it does not like assigning the document object to a variable before invoking its methods. the following script, for example, should be equivalent to Example 27-1, but fails to work properly (the window opens but nothing is written to it):

<HTML>
<HEAD>
<TITLE> A custom "alert" </TITLE>
<SCRIPT LANGUAGE="JavaScript>
<!--

function pop(height, width, content) {
  win = window,open(("","","height=" + height + ",width=" +
  width)
  if (win I = null) {
  doc = win,document
  doc,open('text/html')
  doc.write("<HTML><HEAD><TITLE>JavaScript Alert
  </TITLE></HEAD><BODY>")
  doc.write(content)
  doc.write("</BODY></HTML>")
  doc.close()
  }
}

// -->
<SCRIPT>
<HEAD>
<BODY>
<FORM>
<INPUT TYPE="button"VALUE="custom alert" onClick="pop(75, 250,
   'You can use such windows instead of alert
   dialog boxes!')">
</FORM>
</BODY>
</HTML>

The workaround to this problem is not to design the document object to a local variable before invoking its methods.

Table of Contents