Opening and Closing New Windows

Opening and Closing New Windows

The window. open method is a big one, because it enables you to open new browser windows. Here's how you use this method:

 window.open( [  URL  ] [,  name  ] [,  features  ] [,  replace  ]) 

This method returns the new window object. The arguments for this method are URL and name .

The URL argument specifies the URL of the document to display. If no URL is specified and you pass an empty string ( "" ), a new window with the title about:blank displays.

The name argument is a string that specifies the name of the window. (The name is a one-word name for the NAME attributenot the title of the windowthis name is used as the value for the TARGET attribute on a form or an element.) You also can use these values here:

• replace . Specifies that the new document is to replace the current entry in the history list.

• _blank . The document is loaded into a new, unnamed window.

• _media . The document is loaded into the HTML content area of the Internet Explorer Media Bar (available in Internet Explorer 6 or later).

• _parent . The document is loaded into the current frame's parent.

• _search . The document is opened in the browser's search pane (available in Internet Explorer 5 and later).

• _self . The current document is replaced with the specified document.

• _top . The document replaces any framesets that may be loaded. (As you would expect, if no framesets are defined, this value acts as the value _self .)

The features argument is a string list of items separated by commas. Each item consists of an option and a value, separated by an equals sign (for example, "fullscreen=yes , toolbar=yes" , as we'll see in a page or twonote that you should not use spaces between these items, because NS4 can't handle such spaces). You can find the possible values in Table 8.5all values are Boolean values you set to "yes," "no," 1 (same as yes), or 0 (same as no) unless otherwise noted.

Table 8.5. The Features of Windows Opened with the window.open Method

Feature	Means
alwaysLowered	New window appears behind other browser windows. (NS4+)
alwaysRaised	New window appears in front of other browser windows. (NS4+)
channelmode	Specifies whether to display the window in theater mode and show the channel band . The default is "no" . (IE4+)
copyhistory	Copies the history for new window. (NS2+)
dependent	The new window should close if window that opened it closes . (NS4+)
directories	Specifies whether to add directory buttons . The default is "yes" . (NS2+, IE3+)
fullscreen	Specifies whether to display the browser in full-screen mode. The default is "no" . (IE4+)
height	Specifies the height of the window, in pixels. Set to an integerthe minimum value for the Internet Explorer is 100. (NS2+, IE3+)
hotkeys	This item disables menu shortcuts when the menu bar is not visible. (NS4+)
innerHeight	Height of the client area. Set to an integer. (NS4+)
innerWidth	Width of the client area. Set to an integer. (NS4+)
left	Horizontal position of upper-left corner of the window in screen coordinates. Set to an integer value, in pixels. (IE4+)
location	Specifies whether to display the input field for entering URLs directly into the browser. The default is "yes" . (NS2+, IE3+)
menubar	Specifies whether to display the menu bar. The default is "yes" . (NS2+, IE3+)
outerHeight	Outer height of the window. Set to an integer value, in pixels. (NS4+)
outerWidth	Outer width of the window. Set to an integer value, in pixels. (NS4+)
resizable	Specifies whether to display resize handles at the corners of the window. The default is "yes" . (NS2+, IE3+)
screenX	Horizontal position of window's upper-left corner in screen coordinates. Set to an integer value, in pixels. (NS4+)
screenY	Vertical position of window's upper-left corner in screen coordinates. Set to an integer value, in pixels. (NS4+)
scrollbars	Specifies whether to display horizontal and vertical scrollbars if needed. The default is "yes" . (NS2+, IE3+)
status	Specifies whether to display the status bar at the bottom of the new window. (NS2+, IE3+)
titlebar	Specifies whether to display a title bar for the window. The default is "yes" . In the Internet Explorer, this parameter is ignored unless the calling application is an HTML application or a trusted dialog box. (NS4+, IE4+)
toolbar	Specifies whether to display the toolbar, displaying buttons such as Back, Forward, and Stop. The default is "yes" . (NS2+, IE3+)
top	Vertical position of upper-left corner of the window in screen coordinates. Set to an integer value, in pixels. (IE4+)
width	Specifies the width of the window, in pixels. Set to an integerthe minimum value for the Internet Explorer is 100. (NS2+, IE3+)
z-lock	Locks the new window layer below other browser windows. (NS4+)

Tip

If you display a new window in full-screen mode, the browser's controls won't be visible, so you should provide a way for the user to close the browser, or at least let the users know they can close the window with Ctrl+W in both the Internet Explorer and the Netscape Navigator.

Finally, the replace argument is a Boolean value that holds true if the new document replaces the current document in the history list or false if the new document should create a new entry in the history list.

We've already seen the open method at work in Chapter 7, "Using window and frame Properties;" in this example (it's Listing 07-02.html on the web site), we opened a new blank window, creating the window object window1 , and then wrote to the new window with the window1.docuent.write method like this (note that the only features we're setting here are the height and width: "height=300,width=300" , but we could have done more like this "height=300,width=300,scrollbars=yes,toolbar =no" and so on):

 <HTML>      <HEAD>          <TITLE>Using the closed and opener Properties</TITLE>          <SCRIPT LANGUAGE="JavaScript">              <!--             var window1              function openWindow()              {  window1 = window.open("","window1", "height=300,width=300")   window1.document.write("<HTML><BODY><H1>A New Window</H1><BR>" +   "<FORM><INPUT TYPE='button' VALUE='Close the original window'" +   "ONCLICK='window.opener.close()'>" +   "</FORM></BODY></HTML>")  window1.document.close()              }              function closeWindow()              {                  if (window1 && !window1.closed) {                      window1.close()                  }              }              // -->          </SCRIPT>      </HEAD>      <BODY>          <H1>Using the closed and opener Properties</H1>          <FORM>              <INPUT TYPE="button" VALUE="Open New Window" ONCLICK="openWindow()">              <INPUT TYPE="button" VALUE="Close New Window" ONCLICK="closeWindow()">          </FORM>      </BODY>  </HTML> 

You can see the results in Chapter 7, in Figure 7.2.

Tip

When you're opening new windows and writing HTML to them, as we are here, it's sometimes wise to wait for a while after opening a new window to make sure it's ready to go (that is, fully loaded) before writing to it ( especially with the Internet Explorer). You can do that with the window method setTimeout , discussed in the previous topic.