Using the window.open method

The syntax of the window.open method is given below:
open (URL, windowName[, windowFeatures])

URL
The URL of the page to open in the new window. This argument could be blank.

windowName
A name to be given to the new window. The name can be used to refer this window again.

windowFeatures
A string that determines the various window features to be included in the popup window (like status bar, address bar etc)

The following code opens a new browser window with standard features.

window.open ("http://jsc.simfatic-solutions.com","mywindow"); 

Changing the features of the Popup

You can control the features of the popup using the last argument to the window.open method. The following code opens a window with a status bar and no extra features.

window.open ("http://jsc.simfatic-solutions.com","mywindow","status=1");

The code below opens a window with toolbar and status bar.

window.open ("http://jsc.simfatic-solutions.com", "mywindow","status=1,toolbar=1");

The table shows the features and the string tokens you can use:

status The status bar at the bottom of the window.
toolbar The standard browser toolbar, with buttons such as Back and Forward.
location The Location entry field where you enter the URL.
menubar The menu bar of the window
directories The standard browser directory buttons, such as What’s New and What’s Cool
resizable Allow/Disallow the user to resize the window.
scrollbars Enable the scrollbars if the document is bigger than the window
height Specifies the height of the window in pixels. (example: height=’350′)
width Specifies the width of the window in pixels.

Examples

The following code opens a window with menu bar. The window is re-sizable and is having 350 pixels width and 250 pixels height.

window.open ("http://jsc.simfatic-solutions.com","mywindow","menubar=1,resizable=1,width=350,height=250");

Example 1

A window with location bar, status bar, scroll bar and of size 100 X 100

window.open ("http://jsc.simfatic-solutions.com", "mywindow","location=1,status=1,scrollbars=1, width=100,height=100");

Example 2

Moving the window to a desired location

You can use the window.moveTo function to move the popup window to a desired location.
The code below shows positioning the popup at a desired location.

function mypopup()
{
    mywindow = window.open("http://jsc.simfatic-solutions.com", "mywindow", "location=1,status=1,scrollbars=1,  width=100,height=100");
    mywindow.moveTo(0, 0);
}

The code positions the popup on the top left corner of the screen.

Putting it all together

Now we will combine all these information to create the popup windows of different types.
The Code below opens a popup window when you enter the page:

<html>
<head>
 <title>JavaScript Popup Example 3</title>
</head>
<script type="text/javascript">
function poponload()
{
    testwindow = window.open("", "mywindow", "location=1,status=1,scrollbars=1,width=100,height=100");
    testwindow.moveTo(0, 0);
}
</script>
<body onload="javascript: poponload()">
<h1>JavaScript Popup Example 3</h1>
</body>
</html>

Notice that the URL is kept blank. This will open a blank window. You can see the code in work in this file:
JavaScript Popup Example 3

Popup On Exit

The following code pops up a window when the user exits a page.

<html>
<head>
 <title>JavaScript Popup Example 3</title>
</head>

<script type="text/javascript">
function exitpop()
{
    my_window = window.open("", "mywindow1", "status=1,width=350,height=150");
    my_window.document.write('<h1>Popup Test!</h1>');
}
</script>

<body onunload="javascript: exitpop()" >
<h1>JavaScript Popup Example 4</h1>
</body>
</html>

The code contains an extra line:

my_window.document.write('<h1>Popup Test!</h1>') 

This code displays a line ‘Popup Test!’ in the popup.

The code is available in the file:
JavaScript Popup Example 4

Comments on this entry are closed.

  • Thanks!
    This worked good.

  • Nice article.
    I have 1 problem…
    I am using window.open() in my master page
    like…

    I have 3 such buttons which opens different url.
    Problem is when first I click on button it opens popup without any problem.
    Now, in newly opened popup again I have same 3 buttons.
    These buttons are not working.
    why so?

  • Fixed it. I think I missed a comma. Happy new year!

  • Works in Safari, IE, Chrome, and Firefox for me, but the popup still resizes thoug I set resizable=0, which sort of ruins the design, since I have a photo for background. Aidez moi, anyone?

  • Thanks for this info on how to create a pop-up. I want to incorporate it for the privacy policy, t and c etc pages so that they open in a smaller window over my main site. I’m also going to look at using your exit pop-up code to add a sign-up option for a freebie just before they leave the page.

    I like the way that the code is simple and straightforward i.e. easy to follow.

    All the best for the New Year and thanks again.

    Chow chow,
    Kevin

  • hi i have used your code everything is working fine.
    window.open( “http://qa.kicktest.com/user/displayUserLoginPage.kickAction?as=162887”, “myWindow”,”status = 1,resizable=1,menubar=1,location=1,toolbar=1,titlebar=1,scrollbars=1″ );

    can you please tell me how can i add tab bar. while am using this code my browser not displays tab bar. please reply. thanks in advance

  • this was really helpful but I was looking for some code that I had once to open a pop-up days later – as long as the cookies had not been deleted.

    Thanks for putting this much together.

  • How to make it with the VBScript? Java’s script is not good compare with VB script soft. How to put VB soft on the open window?

    • What? Are you trolling? This isn’t Java, or “Java’s script”. This is JavaScript, and it has nothing to do with Java. Also, VBScript is incompetent compared to it.

  • wow, it works but I want tutorials on em beding background mosic that works is all navigators. Cheers.

  • It works!!
    Thank you!!

  • I use the popup windows to show weekly bowling scores. However, if someone wants to select additional weeks to look at they go to the background. Is there a way to keep the popup window on top until it loses focus?

  • how to pass data to child window?

  • if we click on a link in pop-up window,can we see that open page in parent window?plz help me for this situation.

  • i need to know how a popup window open with accept or deny request

  • Resizable=1 not working its not taking the whole argument list…
    wat to do in this case? i tried using window.showModalDialog still resizability problm exist..!! help plz…!!

    • try Resizable=yes hope it helps

  • how to open a new window wihtout address bar…

  • these examples are best with IE..

  • Doesn’t work in IE or Mozila Either…

  • how to set scroll bar = yes/no ?

  • The example on this page does not work in safari. It instead redirects to the page rather than opening a new popup.