Open a page in a new window of a specific size


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.

Comments (31)

  1. Jerry Pisk says:

    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.

  2. Lisa Wollin says:

    Agreed. Thanks, Jerry. I thought of adding it but decided not to. From personal experience, it causes some serious problems and not small amount of irritation when users can’t access information further down in the browser window.

    It’s nice to know that you can do it, but take your audience into account when using it and be sure to test it on several different systems and browsers before deploying it, which is just good sense when working with any Web pages.

  3. MARiE says:

    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 THERE`S SOME CODE FOR IT. I SAW IT ON SOMEONE`S A LONG TIME AGO. PLEASE PLEASE PLEASE HELP. ONCE YOU GET THIS PLEASE EMAIL ME BACK ON LILDREAMER247@AOL.COM THANKS A BUNCH!

  4. Lisa Wollin says:

    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.

  5. pradap says:

    hi anybody plz send the code for ,when a text is clicked one window wants to open with nomenubar,scroolbar,takbar etc

  6. There are many online calculators. You’ve probably seen, and perhaps used,

    several. Some calculate…

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

  8. Yuri says:

    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?

  9. Anita says:

    I love arun. he is my life. when he fucks me, ifeels as it i were in heaven. if you want to fuck me then send me an sms on 9871512362.

  10. nrupin says:

    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

  11. Yuri says:

    nrupin: There isn’t any way to do what you want. Sorry. Use <body onload="window.open(…)"> instead.

  12. tzipi says:

    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

  13. tzipi says:

    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

  14. reese says:

    thanks for the info, but how do i input it into frontpage?

  15. Piet says:

    Thanks

  16. Oracle_Star says:

    i want to open first page with specific size and also without any item like menu statusbar etc

  17. John says:

    is there a possible way to open a specific size code without javascript??

  18. Sara says:

    How do I make FrontPage stop opening the pages in new windows?

  19. Praveena says:

    Hai all,

     I want the calculator to be popup in a special window using javascript could anybody help in this case

  20. Amit says:

    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?

  21. deepthi says:

    i am creating a window using showModelessDialog() and want to access that window from my parent window can i do this??

Skip to main content