Summary & Examples of Pop-Up Windows

Window open syntax

open('testpage.htm', 'myExample2');

Note all the name-value pairs must be separated by commas, but must not have spaces between them. For example, the following is incorrect:

open('testpage.htm', 'myExample2', 'location=yes,  menubar=yes');

Whereas the following, which does not have spaces, is correct:

open('testpage.htm', 'myExample3', 'location=yes,menubar=yes');

The values for the Boolean parameters may be 0 or 1 or yes or no. If a particular Boolean parameter is not specified then its value defaults to no. For example, to open a window without directory buttons, location field, menubar, scrollbars, status or toolbar and not resizable use:

open('testpage.htm', 'myExample4', 'width=600,height=500');

Again, if you don't specify the width and height then the page mimics the current window.

However, to create a window with all the window features you need to explicitly include them:

open('testpage.htm', 'myExample5',
         'width=600,height=500,directories=yes,
          location=yes,menubar=yes,scrollbars=yes,
          status=yes,toolbar=yes,resizable=yes');

Stringing it together

So now that we know how to create a window with any features we desire, how can we use JavaScript to control the features we want? The first three parameters are all strings; JavaScript can manipulate strings just as well as any other programming language.

<SCRIPT>

function createWindow(what) {
     var URL = what.URL.value;

     var windowName = what.windowName.value;

     var features =
               'width='   + what.width.value +
              ',height='  + what.height.value +
       ,directories='  + (what.directories.checked - 0) +
          ',location='   + (what.location.checked - 0) +
          ',menubar='  + (what.menubar.checked - 0) +
       ',scrollbars='   + (what.scrollbars.checked - 0) +
              ',status='   + (what.status.checked - 0) +
           ',toolbar='   + (what.toolbar.checked - 0) +
       ',Resizable='   + (what.Resizable.checked - 0);

    window.open (URL, windowName, features);
}

</SCRIPT>

<FORM>
     URL <INPUT TYPE="text" NAME="URL" VALUE="testpage.htm">
     Name <INPUT TYPE="text" NAME="windowName" VALUE="myWindow">
     Width <INPUT TYPE="text" NAME="width" VALUE="200">
     Height <INPUT TYPE="text" NAME="height" VALUE="200">
     <INPUT TYPE="checkbox" NAME="directories"> Directories
     <INPUT TYPE="checkbox" NAME="location"> Location
     <INPUT TYPE="checkbox" NAME="menubar"> Menubar
     <INPUT TYPE="checkbox" NAME="scrollbars"> Scrollbars
     <INPUT TYPE="checkbox" NAME="status"> Status
     <INPUT TYPE="checkbox" NAME="toolbar"> Toolbar
     <INPUT TYPE="checkbox" NAME="resizable"> Resizable
     <INPUT TYPE="button" VALUE="Create It"
       onClick="createWindow(this.form)">
</FORM>

Which you can try out for yourself:

URL Name Width Height
Directories Location Menubar Scrollbars
Status Toolbar Resizable

Maintaining their focus and keeping them centered

You may have noticed that its quite easy to lose pop-up windows - they can become hidden behind the main browser window. This happens when the main browser window regains focus, i.e., becomes the selected window. To avoid this you need to decide whether you want the pop-up window to have exclusive control of the browser, or whether you want it to be closed, or even brought to the front after a short delay.

By placing the following in the document loaded into the pop-up window then the pop-up will remain in front of the main browser window:

<BODY onBlur="window.focus();">

This has the side effect on some browsers of inhibiting the use of the main browser window until the pop-up window is closed. If you don't require this feature then you could always refocus the pop-up window after a delay:

<BODY onBlur="setTimeout=('window.focus()', 1000);">

Which ensures that the pop-up window regains the focus after a delay of one second - enough time to allow the user to interact with the main browser window.

Of course you may decide that if the user has moved the focus to the main browser window, that the pop-up window should be closed:

<BODY onBlur="window.close();">

Keeping windows centered

In Netscape 4.x, the screenX and screenY attributes were introduced. In IE 4.x the top and left attributes were introduced. By combining the two both Netscape 4.x and IE 4.x will allow you to position the window. In earlier browsers the attributes and their values will be safely ignored:

open('testpage.htm', 'myExample6',
         'width=600,height=500,screenX=400,screenY=400,top=100,left=100');

To actually center the pop-up window requires the use of the window objects outerWidth and outerHeight properties in Netscape 4.x and the screen objects width and height properties in IE 4.x. However, this results in the pop-up window being centered within the confines of the main browser window in Netscape 4.x, and centered within the confines of the screen in IE 4.x - not the same thing, unless the main browser window is maximized.

<SCRIPT>

function centerWindow() {
     if (document.all) {
          var xMax = screen.width;
          var yMax = screen.height;
     }
     else if (document.layers) {
          var xMax = window.outerWidth;
          var yMax = window.outerHeight;
     }
     else {
          var xMax = 600;
          var yMax = 500;
     }

     var xOffset = (xMax / 2) - (580 / 2);
     var yOffset = (yMax  / 2) - (580 / 2);

     open('testpage.htm', 'myExample7',
               'width=600,height=500' +
               ',screenX=' + xOffset + ',screenY=' + yOffset +
               ',top=' + yOffset + ',left=' + xOffset);
}

</SCRIPT>

Controlling Pop-up Windows

The windowHandle allows you to control the contents of the pop-up window; either to change the location of the pop-up window, to write HTML code into the window, or to interrogate the window properties.

Changing Location

The following shows how to alter the location of the pop-up window from blank.htm to testpage.htm:

<SCRIPT>

myWindow8 = open('blank.htm', 'myExample8', 'width=600,height=500');

myWindow8.location.href = 'testpage.htm';

</SCRIPT>

There are potential problems with the code above. There are occasions where the window may not actually be opened before the change of location is attempted. It is best to change the above code to introduce a slight delay to give the browser a chance to actually open the window first. The following introduces a one second delay before the location is changed:

<SCRIPT>

myWindow8 = open('blank.htm', 'myExample8', 'width=600,height=500');

setTimeout("myWindow8.location.href = 'testpage.htm'", 1000);

</SCRIPT>

Writing things down

The following demonstrates how to write directly to the pop-up window using the windowHandle in conjunction with the documents write method. The first occasion that the window is written to will cause the existing contents to be replaced, other following document writes append information to the window.

<SCRIPT>

myWindow9 = open('testpage.htm', 'myExample9', 'width=600,height=500');

function update() {
     for (var i = 0; i < 10; i++) {
          msgWindow9.document.write('Message number ' + i + '<BR>');
     }
}

setTimeout('update()', 1000);

</SCRIPT>

Interrogation

With frames in a frameset its fairly straight forward to access the parent frame or the child frame, all you need to do is remember the object hierarchy. For example, the following frameset:

<FRAMESET COLS="50%,50%">
     <FRAME SRC="one.htm" NAME="left">
     <FRAME SRC="two.htm" NAME="right">
</FRAMESET>

Produces the following structure:

       Parent Frame
            |
       +----+----+
       |         |
    one.htm   two.htm

To access the parent frame from one.htm, use simply use: alert(parent.location.href), which will highlight the location of the parent frame, and similarly, to perform the reverse alert(left.location.href) will highlight the location of the left frame from the parent frame, and alert(parent.right.location.href) will highlight the location of the right frame from the left frame.

Once you've established this simple object syntax, you can use it to read and write almost any property of any other window within the frameset.

However, when you've opened a new window, the window does not form part of a frameset - therefore a new means of accessing the new window from the opener (i.e., the window that opens the new window) is required and vice versa. 

Well, accessing the new window is straight forward enough, you just use the window name as shown in the previous example. Modern browsers also include a means of accessing the opener window. Funny enough, by providing an opener property, ie, window.opener, which will reference the window, if any, that opened the current window. For example alert(window.opener.location.href) will highlight the location of the current window's opener.

<SCRIPT>

myWindow11 = open('blank.htm', 'myExample11', 'width=600,height=500');

if (newWindow11.opener == null) newWindow11.opener = self;

</SCRIPT>

Which checks to see whether the new window already has an opener property, and if not, creates one with a reference to the current window. This new window property can be used as if the browser supplied the opener property itself.

Calendar pop-up window

To round this off, I've included a practical example of using pop-up windows. The Form button, when pressed, opens up a Calendar with appropriate Month and Year.

<SCRIPT>

function getCal(form){
     var month = form.Month.value;
     var year = form.Year.value;

     open('calendar.htm?Month=' + month + '&' + 'Year=' + year, 'myExample11', 
              'width=800,height=550');
}

</SCRIPT>

<FORM>
     Month
     <SELECT NAME="Month" SIZE="1">
          <OPTION VALUE="1">Jan</OPTION>
          ect...
          <OPTION VALUE="12">Dec</OPTION>
     </SELECT>
     Year
     <SELECT NAME="Year" SIZE="1">
          <OPTION VALUE="2000">00</OPTION>
          ect...
         <OPTION VALUE="2005">05</OPTION>
     </SELECT>
     <INPUT TYPE="button" VALUE="Show Calendar" onClick="getCal(this.form)">
</FORM>

Month Year

Hopefully, this showed you how to create new windows with properties and attributes that you can specify yourself. You've also seen how to write to these windows and how to access one window from another.