Opening a New Browser Window

Posted by: twmeier

Tagged in: Javascript , HTML

There are times when you may want to open a page in a new browser window. You may also want to be able to determine the size of the new window, whether or not to have scroll bars, tool bars,  status bars etc..  There is a ready-made JavaScript function that you can use to do this:

window.open('url', 'window name', 'attribute1', 'attribute2', .....)

  1. 'url'
    This is the url of the page you would like to appear in the new window.
  2. 'window name'
    You can name your window whatever you like, which can be used if you need to make a reference to the window later.
  3. 'attributes'
    Attributes determine how the new window will look, and are listed below.

Attributes

Below is a list of the attributes you can use:

  1. width=300
    Defines the width of the new window.
  2. height=200
    Defines the height of the new window.
  3. resizable=yes or no
    Use this to control whether or not you want the user to be able to re-size the window.
  4. scrollbars=yes or no
    Whether or not the new window will have scrollbars.
  5. toolbar=yes or no
    Whether or not the new window should have the browser navigation bar at the top (The back, foward, stop buttons etc.).
  6. location=yes or no
    Whether or not to show the location box with the current url.
  7. status=yes or no
    Whether or not to show the window status bar at the bottom of the window.
  8. menubar=yes or no
    Whether or not to show the menus at the top of the window (File, Edit, etc...).
  9. copyhistory=yes or no
    Whether or not to copy the old browser window's history list to the new window.

Use this Javascript function use an onclick event:
onClick="window.open('http://www.someurl.com','Window Name','width=400,height=200')"

So to use it in a text link, the HTML would look like the following:
<a href="javascript:void(0);" onclick="window.open('http://www.yahoo.com','Window Name','width=400,height=200')">New Window</a>

Click the link below to give it a try:

New Window