I've often seen questions in the FrontPage Programming newsgroup for code to programmatically open a page in a browser window that is of a specifc size.  Of course, using the target attribute of the A element, you can easily open a new page in a new browser window, but it will be the same size as other browser windows.  However, sometimes you may want to have a smaller browser window, or you may not want the user to be able to resize the window.  Perhaps you want to remove the menu bar, address bar, status bar, or scroll bars. Today's tip shows JavaScript for doing this.

The code is fairly simple, but there are a few ways to do this.  One way uses the open method; another way uses the  showModalDialog method; and another way uses the showModelessDialog method.  I'll explain each of these below.

open Method

The open method does just that:  it opens a new page.  Similar to the navigate method, by default it will open the page in the current browser window.  However, unlike the navigate method, the open method also has parameters that allow for opening in a new window and for specifying the appearance of that window.  The open method has the following signature:

window.open( [sURL] [, sName] [, sFeatures] [, bReplace])

If you take a look at the help topic for the open method, you will get specific information about each of the parameters, but here are the basics:

  • sURL is the address for the new page.
  • sName is the value of the target attribute for an A element; which for this tip will be "_blank" to open a new window, but which could be the name of a frame or another window.
  • sFeatures specifies the display options for the window, including height and width.
  • bReplace specifies whether the new URL is added to or replaces an item in the browser's history list.

For this tip, we are only concerned with the first three parameters and will omit the fourth.  So here's the code:

function openNewWindow()
{
    window.open("http://www.microsoft.com", "_blank", 
        "height=340px width=240px");
}

This code opens a new browser window that is 340 pixels high and 240 pixels wide and displays the Microsoft home page.  You could add options to the sFeatures parameter string to hide the status bar, hide the scroll bars, prohibit resizing the window, and more.  The help topic noted above has the complete list of options and possible values.  All you need to do is add them to the sFeatures parameter string, separating each name=value pair with a space.

showModalDialog Method

The showModalDialog method is another way to show a page in a new window of a specific size, but when you use the showModalDialog method, the user can't return to the first window until he/she closes the modal dialog window.  This is especially useful when you need you need to return values from the dialog (which I'll save for a future tip). When you use the showModalDialog method to open a new window, the new browser window cannot be resized. The signature for the showModalDialog method is as follows:

window.showModalDialog(sURL [, vArguments] [, sFeatures])

If you look at the help topic for the showModalDialog method, you will get specific information about each of the parameters, but here are the basics:

  • sURL is the address for the new page.
  • vArguments passes values to the dialog box.
  • sFeatures specifies the display options for the dialog box, such as height, width, and whether to show the help button, scroll bars, menu bar, etc.

For this tip, we are concerned only with the first and third parameters.  Here's the code:

function openNewWindow()
{
    window.showModalDialog("http://www.microsoft.com", "", 
        "dialogHeight:340px; dialogWidth:240px")
}

This code opens a new browser window that is 340 pixels high and 240 pixels wide and opens the Microsoft home page. You can add additional dialog box features by adding them to the sFeatures string, separating each name=value pair with a semicolon.  The help topic mentioned above lists all the features and possible values."

showModelessDialog Method

The showModelessDialog method is similar to the showModalDialog method except that the user can move between the first page and the modeless dialog window. As with the showModalDialog method, when you use the showModelessDialog method to open a new window, the new browser window cannot be resized, and the dialog box always stays on top. The signature for the showModelessDialog method is as follows:

window.showModelessDialog(sURL [, vArguments] [, sFeatures])

You will notice that the signature for the showModelessDialog method is the same as the showModalDialog method. If you look at the help topic for the showModelessDialog method, you will get specific information about each of the parameters and the possible values.  As with the previous code, for this tip, we are concerned only with the first and third parameters.  Here's the code:

function openNewWindow()
{
    window.showModelessDialog("http://www.microsoft.com", "",
        "dialogHeight:340px; dialogWidth:240px")
}

You'll probably notice that the only difference between this code sample and the previous one is the name of the method.  This is because the signatures are basically the same.  You can add options to the sFeatures parameter to change the look of the dialog box.

Pulling it All Together

In my typical style, I like to make things difficult, so here's a final code sample that creates a new window that is 300 by 500 pixels, removes the scroll bars, address bar, menu bar, and status bar, and prohibits resizing.

function openNewWindow(newPageURL)
{
    window.open(newPageURL, "_blank","height=500px width=300px " +
        "resizable=no scrollbars=no menubar=no location=no status=no");
}

To add this code, or any of the previous examples, to a Web page, just paste the function in a <SCRIPT> block within the <HEAD> section of the page.  Then add the function, and the URL parameter, to the event that you want to access it.  For example, if you want the code to run when someone clicks on a form button, you would use the onclick event, as shown in the following code:

<input type="button" onclick="javascript:openNewWindow('http://www.microsoft.com');" value="Click Here">

Now that you have the basics, have fun creating new windows with JavaScript.