Vol. 1, No. 33
Opening and Controlling Browser Windows

Everybody loves pop-up windows, right? Heck, they're an integral part of the Tripod business model! Even though they may seem annoying at times, they have some great uses. Read on to learn how they actually work!

HTML allows Web developers to open new browser windows using the TARGET attribute. But for those who are looking for a little more, JavaScript confers the awesome power to position the new windows, close them, and control the content of one window from within another. Here is how it works:

In order to create a link that will open a new window when clicked, indicate the name of the desired new window via the TARGET attribute of the HREF tag, like so: <a href="newpage.html" target="window2">. If you give subsequent links the same target — "window2", they will also open in that window. Cool, no? But you knew that already.

The windows that are opened by the code above will be the same size and shape as the originating window. In order to create those svelte pop-up windows that are just big enough for what you want to put in them, you'll need to use a little bit of JavaScript: to be precise, the window.open() method. This is where the raw power is unleashed.

For this method, you'll need to assign a handle to the window you want to open. The handle is a variable that contains info about the window for later reference. Other attributes, such as the window name and the URL you want to open in it, are optional. So, if we pick "hotwin" as the handle for our window, our pop-up window command is as simple as this:

hotwin=window.open();

That will open a blank new window, which we can refer to from now on as "hotwin." It will have the same layout properties as the current browser window. If there's a specific page you want to open in the new window instead, that is easily specified. While we're at it, let's give the window a name, so the TARGET attribute, as discussed above, can access it:

hotwin=window.open('http://www.tripod.com','mywindow');

The code above will open www.tripod.com in a new window called "mywindow." Got it? The real fun is yet to come. Let's play with window features. Note: this is where you can really annoy your users, so be careful.

The window features we can play with include: the height and width of the window; whether the window is resizable; and the presence/absence of scrollbars, a toolbar, a menu bar, a status bar, and a location field. Each feature is controlled individually, by including "feature=yes" or "feature=no" in the command. Each can be turned on or off, with results varying from a full-featured big window, to a tiny, functionless one, with nothing but a title bar and a close button. To produce the latter, the code would look like this:

hotwin=window.open('http://www.tripod.com','mywindow','width=200, height=300,location=no,menubar=no,scrollbars=no,status=no,toolbar=no, resizable=no');

In fourth-generation and higher browsers (4.0+), there are some additional window features that you can control. Naturally, Netscape and IE have radically different ways of handling them. To adjust where on the screen a new window will appear, IE uses attributes called "top" and "left" — use them to set the distance from the top and left of the screen that you want your new window to be offset by in pixels, and there you go! Netscape's window-positioning attributes work the same way, but they are called "screenY" and "screenX". Just add all four attributes to your list of features for the window you're creating: each specific browser will discard the instructions it doesn't understand.

Alrighty. So now we've got our window, and it looks just the way we want it to. Now let's interact with it. To write to a particular window, just use the document.write() method and call the window you want by its handle. For example,

hotwin.document.write('Your text here');

will write the line "Your text here" to the window named "hotwin."

The technique for reading data from another window is similarly easy. Simply refer, once again, to the new window by its handle. The following code, appearing in the original window, will take the value of the variable "olddata" from the "hotwin" window and put it into the variable "newdata" in the original window:

var newdata = hotwin.olddata;

Conversely, the new window can refer to the original window via the opener property:

var olddata = opener.newdata;

The code above will do the reverse operation. Placed in the new window, it will suck in the value of newdata from the original window.

To change the value of a variable, the same technique applies. Placing the following code in the new window will set the newdata variable in the original window to the string "Here is some new data!"

opener.newdata = 'Here is some new data!';

Does all that make sense? Play around with it, and it will all become clear. Of course, these techniques only really become useful in context. Now you have the know-how, you can pop up a window with a form in it, get information from that form, and use that info to fill in the gaps in your original page.

When you're all done, you can close the window using the close() method:

<FORM> <INPUT type="button" value="Close Window" onClick="self.close()"> </FORM>

HINTS, POINTERS, AND TIPS 'O THE TRADE:

To keep a particular window on top, include the following JavaScript in the BODY tag of the page that's in that window: onBlur="window.focus()"

Fourth-generation browsers can change the size of a window that's already open. Don't abuse this feature or you'll make your users dizzy: window.resizeTo(600,400);

Always drain rechargeable batteries as fully as possible before charging them up again.

RESOURCES:

Webmonkey's JavaScript tutorial

Handcrafted Archive