Working with New Windows

In the next chapter on window object methods and events, we'll cover one of the most popular ways of working with window objectsopening new browser windows with the window. open method. Two properties in this chapter are useful when working with new windows you've opened up closed and opener . The closed property enables you to determine whether a window has been closed, and the opener property holds the window that opened the current window (the parent window).

Here's an example that puts these properties to work. In this case, I'll let the user open and close a new window using buttons . The open button will open a new window, and I'll use the closed property of the new window to check whether it's already been closed when the user clicks the close button in the main windowif the window is already closed, there's no reason to close it again.

I'll also give the new window access to the main window through the opener property. In this case, I'll display a button in the new window that lets the user close the main window by executing the window.opener.close method. Here's what the code looks like (we'll see the window object's open and close methods, used in this code, in the next chapter):

(Listing 07-02.html on the web site)

 <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>

Tip

Why am I using the window1.document.close method after writing to the new window here? I do that to close the HTML stream to the new window (which the window1.document.write method opened) otherwise , the mouse cursor will keep displaying a wait icon in both Netscape Navigator 6.0 and Internet Explorer 4.0, even after the new window is finished. See "Writing to a Document" in Chapter 9 for more details on why that happens.

You can see the results in Figure 7.2, where we're using the closed and opener properties to let the user work with parent and child windowsthe closed property lets us determine whether a window we opened has already been closed, and the opener property gave us access to the window that is the parent of a newly opened window. We'll see a lot more on opening new windows and writing HTML to them in the next chapter.

Figure 7.2. Working with parent and child windows.

graphics/07fig02.gif

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 before writing to it. You can do that with the window method setTimeout , discussed in the previous topic.