Introduction to JavaScript Pop-up Windows

The JavaScript Pop-up Window Primer

For most people, the main browser window is the only one they ever use or need. However, it is possible for another window to be opened up to allow you to either view another page while retaining the existing page in the main window, or to open up a remote window that can control or be controlled by the main browser window.

Another browser window can be simply opened using HTML and the TARGET attribute, either in a link or on a form:

<A HREF="testpage.html" TARGET="anotherWindowName">Open new window</A>

or

<FORM ACTION="testpage.html" TARGET="anotherWindowName">
<input TYPE="SUBMIT" value="Open new window">
</FORM>

As long as the TARGET attribute specifies a window name that is not already open, a new window will be created mimicking the existing window. If the window already exists, then the contents will be changed instead.

The problem with this approach is that apart from the window name there is nothing in common between the two windows. You can change the location of the new window using a similar link for form target -- but that's it. Whereas using JavaScript and the window.open() method, it is possible to control the look and feel of the new window, to have control over its contents, and also to be controlled by the new window.

Window open syntax

The syntax of the open() method is fairly straight forward:

windowHandle = window.open([ URL [, windowName [, features]]])

In addition to this, IE4 has a fourth parameter:

windowHandle = window.open([URL [, windowName [, features [, replace]]]])

windowHandle
The result of the open() method is returned and held in the variable to the left of the assignment operator (=). This is a reference or handle to the newly opened window. It can be used to close the window, and to interrogate and alter the windows properties -- more on this later.

URL
This is the relative or absolute URL of the file to be loaded into the pop-up window, for example:

<SCRIPT LANGUAGE="JavaScript">
<!--
var myWindow = window.open('http://www.irt.org/');
//-->
</SCRIPT>

<A HREF="javascript:window.open('nextpage.htm')">Open Next Page</A>

<FORM>
<input TYPE="button" onClick="window.open('picture.gif')">
</FORM>

If no URL is specified, a new window with about:blank will be displayed.

windowName
This is the target name of the new window. So you could load another document into it with:

<SCRIPT LANGUAGE="JavaScript">
<!--
window.open('testpage.htm','myWindow');
//-->
</SCRIPT>

<A HREF="filename.html" TARGET="myWindow">load file into popup window</A>

Features
The third parameter can hold a large selection of name-value pairs:

If you don't specify the width or height values, then Netscape browsers will mimic the size of the current window, if you don't specify any attributes then Netscape will mimic all the features of the current window:

window.open('testpage.html','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:

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

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

window.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:

window.open('testpage.html','myExample4','width=200,height=200');

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:

window.open('testpage.html','myExample5','width=200,height=200,
directories=yes,location=yes,menubar=yes,scrollbars=yes,
status=yes,toolbar=yes,resizable=yes');

Replace
The fourth parameter is an optional boolean value, either true or false, which in IE4.0+ replaces the current history entry with the new page being loaded (i.e., the last location in the browsers history object is overwritten by the new location).

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 LANGUAGE="JavaScript">
<!--
function createWindow(what) {
    var URL = what.URL.value;
<P>
    var windowName = what.windowName.value;
<P>
    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);
<P>
    window.open (URL, windowName, features);
}
//-->
</SCRIPT>
<P>
<FORM>
URL <input type="text" name="url" value="testpage.html">
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.