Share via

Open a page in a new window of a specific size

  • Article

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("https://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("https://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("https://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('https://www.microsoft.com');" value="Click Here">

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

Comments

  • Anonymous
    July 06, 2004
    Please don't, creating fixed size windows with no scrollbars just won't work unless everybody has exactly the same settings (screen resolution, font sizes and so on) as you. Just don't do it.
  • Anonymous
    July 06, 2004
    The comment has been removed
  • Anonymous
    July 23, 2004
    HEY. I WAS WONDERING ..IF SOMEONE GOES ONTO YOUR WEBSITE LIKE XANGA.COM, CAN YOU HAVE YOUR PAGE LIKE.. STRETCH OUT AND OPEN TO THE CERTAIN SIZE THAT YOU WOULD LIKE IT TO BE? IM NOT SURE WHAT THIS CODE IS CALLED, BUT I KNOW THERES SOME CODE FOR IT. I SAW IT ON SOMEONES A LONG TIME AGO. PLEASE PLEASE PLEASE HELP. ONCE YOU GET THIS PLEASE EMAIL ME BACK ON LILDREAMER247@AOL.COM THANKS A BUNCH!
  • Anonymous
    July 23, 2004
    No problem, Marie. Here's the code. This script works in IE, Netscape Navigator, and Mozilla (I didn't test any other browsers), but keep in mind that it will change the size of not only this window but also all future windows that are opened. I'm sure there is a workaround for this, but I haven't yet found it.

    Here's the script.

    <script>
    function onPageLoad()
    {
    window.resizeTo("250", "350");
    }
    </script>

    Just add an onload event for the body element in the page like so:

    <body onload="javascript:onPageLoad();">

    Hope this helps. If I find another way to do this, I'll post the code.
  • Anonymous
    July 25, 2005
    hi anybody plz send the code for ,when a text is clicked one window wants to open with nomenubar,scroolbar,takbar etc
  • Anonymous
    August 12, 2005
    There are many online calculators. You've probably seen, and perhaps used,
    several. Some calculate...
  • Anonymous
    January 18, 2006
    Bob
  • Anonymous
    January 22, 2006
    Stif
  • Anonymous
    January 23, 2006
    Vadim
  • Anonymous
    January 24, 2006
    Polok
  • Anonymous
    January 26, 2006
    Andry
  • Anonymous
    January 28, 2006
    Alexander
  • Anonymous
    March 07, 2006
    Hi Lisa,
    I've been using the same method to display ModalDialog Boxes, and I have disabled the Scrollbars and the Status bar, but yesterday I noticed while running some tests on the site, that the status bar is displayed on certain machines. How is this possible and how can I correct this issue? Please mail me on aselaw@zone24x7.com asap.

    Thanks and Regards,
    Asela.
  • Anonymous
    March 13, 2006
    Hi!
    Lisa, can you tell me what should I do if I need to open a modal dialog with CLIENT width and height of given size? For example, on machines that doesn't have my site added to "Trusted Zone" the 'disabled' status bar IS displayed, so I need to take this into account (somehow). The next problem is "themes". Modal window header's height may vary depending of current theme.
    How can I consider all these circumstances?
  • Anonymous
    March 15, 2006
    c
  • Anonymous
    March 15, 2006
    The comment has been removed
  • Anonymous
    March 27, 2006
    hi lisa,
    i want to open first page with specific size and also without any item like menu statusbar etc
    means when i enter any url to address bar it open browser with specific size and without any item.
    and also this should happen in same browser
  • Anonymous
    March 27, 2006
    nrupin: There isn't any way to do what you want. Sorry. Use <body onload="window.open(...)"> instead.
  • Anonymous
    March 31, 2006
    how can i use target=_blank & without to have to close this window send another target=_blank with another link! it's always requested to close the prev window...

    i need this answer ASAP
  • Anonymous
    March 31, 2006
    how can i use target=_blank & without to have to close this window send another target=_blank with another link! it's always requested to close the prev window...

    i need this answer ASAP
  • Anonymous
    April 19, 2006
    thanks for the info, but how do i input it into frontpage?
  • Anonymous
    June 15, 2006
    Thanks
  • Anonymous
    August 15, 2006
    i want to open first page with specific size and also without any item like menu statusbar etc
  • Anonymous
    August 24, 2006
    is there a possible way to open a specific size code without javascript??
  • Anonymous
    August 30, 2006
    How do I make FrontPage stop opening the pages in new windows?
  • Anonymous
    September 05, 2006
    Hai all,
     I want the calculator to be popup in a special window using javascript could anybody help in this case
  • Anonymous
    September 22, 2006
    Thank you!
    [url=http://pvwfkrkp.com/wdzt/qzwr.html]My homepage[/url] | [url=http://zbxqjhjs.com/hgww/hpko.html]Cool site[/url]
  • Anonymous
    September 22, 2006
    Well done!
    <a href="http://pvwfkrkp.com/wdzt/qzwr.html">My homepage</a> | <a href="http://kcrnwklk.com/vklm/swwq.html">Please visit</a>
  • Anonymous
    September 22, 2006
    Thank you!
    http://pvwfkrkp.com/wdzt/qzwr.html | http://ansotbvb.com/cudt/dwjs.html
  • Anonymous
    September 24, 2006
    I've been using the same method to display ModalDialog Boxes, and I have disabled the Scrollbars and the Status bar, but yesterday I noticed while running some tests on the site, that the status bar is displayed on certain machines. How is this possible and how can I correct this issue?
  • Anonymous
    September 26, 2006
    i am creating a window using showModelessDialog() and want to access that window from my parent window can i do this??