• Introduction to JavaScript Pop-up Windows
  • Window open syntax
    • "windowHandle"
    • "URL"
    • "windowName"
    • "featureList"
• Methods & Properties of the Window Object
  • Properties
  • Methods

Introduction to JavaScript Pop-up Windows

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.

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

OR

<FORM ACTION="testpage.htm" 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]]])

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>
  var myWindow = open('http://espn.go.com/');
</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>
  window.open('testpage.htm','myWindow');
</SCRIPT>

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

The elements of a browser window. The names in this figure correspond to the parameters you can apply in the open() command. open("URL", "windowname", "featureList");

"featureList"

scriptWin = window.open('script.htm', 'Script', 'width=500,height=400')

The variable scriptWin has an open window object, containing the file 'script.htm'. The name of this new window is Script. The Name attribute allows you to reference this window through JavaScript. The new window has a width of 500 pixels & a height of 400 pixels; these parameters are optional.

Adding parameters to windows

To add one or more of the parameters shown above state them in the open() command enclosed in single quotes, with =yes after the name of the feature you want and =no after one you don't want. For example, if you want a window of a specified size with a toolbar, location box, and scrollbars, you would type the following:

'toolbar=yes,location=yes,scrollbars=yes,width=300,height=300'

as part of the open() command. NOTE: Be sure not to leave any spaces between the commas. This particular window would not be resizable, have directory buttons, nor have a status bar. NOTE: with the exception of width & height, which take integer values, all of these features can be set to true with the value of yes or 1 or set to false with a value of no or 0.

An important point about the open() method is that it is almost always invoked as window.open(), even though window refers to the global object and should therefore be entirely optional. The reason that window is specified explicitly is that the Document object also has an open() method, so specifying window.open() helps to make clear what we are trying to do. This is not only a helpful habit; it is required in some circumstances.

The second, optional argument in the open() method is a name for the newly created window. When you create a frame with the HTML <FRAME> tag, you can specify a name with the NAME attribute. An important reason to specify names for the windows and frames is that those names can be used as the value of the TARGET attribute of the <A>, <MAP>, and <FORM> tags. This tells the browser where you want the results of activating a link, clicking on an image map, or submitting a form to be displayed.

You can only automatically close windows that your own JavaScript code has created. If you attempt to close any other window, the user is presented with a dialog box that asks him or her to confirm (or cancel) that request to close the window. This prevents inconsiderate web sites from closing your main browsing window.

Properties of the Window Object

Methods of the Window Object