Channels ▼
RSS

Web Development

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:

Nav2.0+ Value Description
directories boolean Controls the standard browser directory buttons
height numeric Specifies the height of the window in pixels
location boolean Controls the Location entry field
menubar boolean Controls the menu at the top of the window
resizable boolean Controls the ability to resize the window
scrollbars boolean Controls the horizontal and vertical scrollbars
status boolean Controls the status bar at the bottom of the window
toolbar boolean Controls the standard browser toolbar
width numeric Specifies the width of the window in pixels

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.


Related Reading


More Insights






Currently we allow the following HTML tags in comments:

Single tags

These tags can be used alone and don't need an ending tag.

<br> Defines a single line break

<hr> Defines a horizontal line

Matching tags

These require an ending tag - e.g. <i>italic text</i>

<a> Defines an anchor

<b> Defines bold text

<big> Defines big text

<blockquote> Defines a long quotation

<caption> Defines a table caption

<cite> Defines a citation

<code> Defines computer code text

<em> Defines emphasized text

<fieldset> Defines a border around elements in a form

<h1> This is heading 1

<h2> This is heading 2

<h3> This is heading 3

<h4> This is heading 4

<h5> This is heading 5

<h6> This is heading 6

<i> Defines italic text

<p> Defines a paragraph

<pre> Defines preformatted text

<q> Defines a short quotation

<samp> Defines sample computer code text

<small> Defines small text

<span> Defines a section in a document

<s> Defines strikethrough text

<strike> Defines strikethrough text

<strong> Defines strong text

<sub> Defines subscripted text

<sup> Defines superscripted text

<u> Defines underlined text

Dr. Dobb's encourages readers to engage in spirited, healthy debate, including taking us to task. However, Dr. Dobb's moderates all comments posted to our site, and reserves the right to modify or remove any content that it determines to be derogatory, offensive, inflammatory, vulgar, irrelevant/off-topic, racist or obvious marketing or spam. Dr. Dobb's further reserves the right to disable the profile of any commenter participating in said activities.

 
Disqus Tips To upload an avatar photo, first complete your Disqus profile. | View the list of supported HTML tags you can use to style comments. | Please read our commenting policy.
 
Dr. Dobb's TV