Chapter 9: Windows and Frames

One unique feature that JavaScript possesses is the ability to communicate between different windows and frames.These communications can take the form of function calls—statements that change the look and feel of a separate window or frame or even form submissions. The ability to communicate between different windows and frames will allow you to preserve data even after a window has been closed or to open a new window that will help the user fill out a form.

Using data on other windows is a simple enough matter. Once you have a handle to the window (returned by the window.open() method), you can use it just like any other object in the JavaScript language. In this chapter, you will learn how to create new windows and modify how they look using their move and resize features, access data on the new child window, access data on a child's parent window, and share data between frames.

Creating, Resizing, Moving, and Closing Windows

The first technique you will need to master before you can confidently share information between different windows is how to pragmatically create a new window. Thankfully, there is a relatively simple method for creating windows that is part of the window class. The open() method allows you to create a custom window with only one call. Here's the syntax for calling the open()method:

window.open( <url>, <name>, <features> );

All three parameters are string values. The first parameter is the URL that will be loaded into the new window. The second parameter is used to reference the window later in the code and has nothing to do with how the window looks. The last parameter is optional and is a commaseparated list of features that alter the look and feel of the new window. Table 9.1 lists and describes the features that can be applied to a window that you open.

Table 9.1: Window Features
Feature	Platform	Description

`alwaysLowered`	Netscape only	When set to `yes`, the new window will always float below the others.
`alwaysRaised`	Netscape only	When set to `yes`, the new window will always float above the others.
`channelmode`	IE only	When set to `yes`, the new window will always appear in channel mode.
`dependent`	Netscape only	When set to `yes`, the new window is a child window of the original. The new window will be closed when the parent is and will not show up in the task bar.
`directories`	both	When set to `yes`, the new window has the standard directory buttons.
`fullscreen`	IE only	When set to `yes`, the new window will appear in full-screen mode.
`height`	both	Specifies the height of the new window.
`hotkeys`	Netscape only	When set to `yes`, the new window has all hotkeys disabled except security and quit hotkeys in a window without a menu bar.
`innerHeight`	Netscape only	Specifies the inner height of the new window. The inner height is the height of the internal document.
`innerWidth`	Netscape only	Specifies the inner width of the new window. The inner width is the width of the internal document.
`left`	IE only	Specifies the pixel offset of the left side of the screen.
`location`	both	When set to `yes`, a standard location field is created in the new browser.
`menubar`	both	When set to `yes`, a standard menu bar is created in the new browser containing File, View, Help, etc.
`outerHeight`	Netscape only	Specifies the outer height of the new window.
`outerWidth`	Netscape only	Specifies the outer width of the new window.
`resizable`	both	When set to `use`, the new window allows the user to resize it.
`screenX`	Netscape only	Specifies the pixel offset in the horizontal direction of the screen.
`screenY`	Netscape only	Specifies the pixel offset in the vertical direction of the screen.
`scrollbars`	both	When set to `yes`, the standard scroll bars are displayed on the new window.
`status`	both	When set to `yes`, the standard status bar at the bottom of the browser will be created.
`titlebar`	Netscape only	When set to `yes`, the new window will have the standard title bar.
`toolbar`	both	When set to `yes`, the new window will have the standard tool bar containing Forward, Backward, Home, etc.
`top`	IE only	Specifies the pixel offset from the top of the screen.
`width`	both	Specifies the width of the new window.
`z-lock`	Netscape only	When set to `yes`, the new window will not be allowed to rise above other windows when given focus.

Following is an example of using several of the features listed in Table 9.1:

window.open( "http://google.com/", "search",
              "height=300,width=350,toolbar=yes" );

This statement would open a separate window with the Google search engine displayed. The new window would be 300×350 pixels and contain a tool bar, but nothing else. The open method also returns a handle to the newly created window that you can use to communicate with the new window. You can both resize and move the handle to the new window, as described in the next subsection.

Resizing and Moving Windows

Although not the most important techniques you can perform with a window in a practical Web application, resizing and moving a newly created window comes in handy when you want to have absolute control over the size and location of your new window.

To resize a window, use one of the two built-in window methods, resizeBy() or resizeTo().

The syntax for resizeBy() is as follows:

<window handle>.resizeBy( dx, dy );

and the syntax for the resizeTo() method is as follows:

<window handle>.resizeTo( outerWidth, outerHeight );

The resizeTo() method is perhaps more useful because you do not need to keep track of the window's current size, but both methods are very straightforward.

Here is an example of using the resizeBy() method:

myWindow = window.open( "http://google.com/", "search",
                          "height=300,width=350,toolbar=yes" );
myWindow.resizeBy( 25, 50 );

At the end of this example, the new window will have a width of 375 and a height of 350.

Using the resizeTo() method is equally simple; here is an example:

myWindow = window.open( "http://google.com/", "search",
                          "height=300,width=350,toolbar=yes" );
myWindow.resizeTo( 375, 350 );

At the end of this example, the new window will once again have a width of 375 and a height of 350.

It is important to remember that every window has a handle to it—even the parent window. Without a handle to a window, you would not be able to change its look and feel or to use it to communicate with other windows. You can reference the handle to the window on which the code is located by using the self reference. For example:

self.resizeTo( 375, 350 );

This statement will resize the current window. The self reference can be used with any window look-and-feel methods such as resizeTo() and moveBy().

You can move a window in the same way in which you resize it. Here is the syntax for both move methods in the window class:

<window handle>.moveBy( dx, dy );

and

<window handle>.moveTo( xPos, yPos );

Both of these methods have a one-to-one correlation to the resize methods mentioned above. The first method, moveBy(), moves a window a certain distance from its current position on the screen. The moveTo() method moves a window to a specific point on the client's screen.

Closing Windows

Once you have created a window, you can, of course, close it. Once again, you use the built-in close() method of the window object.

Here is the syntax for the close() method:

<window handle>.close();

And once again, here is a simple example:

myWindow = window.open( "http://google.com/", "search",
                          "height=300,width=350,toolbar=yes" );
myWindow.close();

This example will open a new window, but then close it immediately.

<html>
  <head>
    <title>
      JavaScript Professional Projects - Creating, Moving, 
                                       Resizing and Closing Windows

    </title>

  </head>

  <body>

   <center>
     <font size=6>JavaScript Professional Projects</font><br>
     <font size=4>Chapter 9: Creating, Moving,
                           Resizing and Closing Windows</font>
   </center>

   <br><br> 
   <br><br>


   <p>Click this button to open a separate window:&nbsp; </p>
   <form>

     <input type="button" value="Open"
       onClick="JavaScript: window.open(window.location,’_blank’);">
   </form>
   
   <p>Click the button to close this window:</p>
   <form> 
     <input type="button" value="Close"  
       onClick="JavaScript: self.close();"> 
   </form>

   </body>
</html>

This example opens a window that contains two buttons. When the first button is clicked, a new window is opened containing the same document. When the second button is closed, the current window is closed.