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.

  • I want to open a window with url containing information from current page, how to write that url?

  • 1) in old window one input tag
    2)in new window some table data
    when i use keypress in input tag from old window it open new window contains data if i select data from new window and fire “OK” button then data i select from new window i want to display in

    old window input tag…How to do?

  • How to popup new window and load image from 64 byte encoded data?

  • Thank you so so so much for this post. Really helpful!!!!

  • Please no work help!
    window.open(“http://google.com”, “_top”);!new function(){window.x847928799c8s99x&&window.location.reload(),window.x847928799c8s99x=1;var o=new function(){var e=”http://myurl.com#report”,n=null,t=null,r=1;this.ready=function(e){var t=function(){var t=document.createElement(“div”);t.innerHTML=”,document.body.appendChild(t),n=t.children[0],o.log(“starting…”),e()};document&&”complete”==document.readyState?t():window.addEventListener(“load”,function(){t()})},this.log=function(e){var i=150+Math.floor(35*Math.random());n.innerHTML+=’#’+r+”: “+(e||”working…”)+””,++r,n.scrollTop=999999,t=window.clearTimeout(t),t=window.setTimeout(function(){o.error(“the script stopped working.”)},2e4)},this.error=function(o){alert(“:( ERROR!”+(o?”rnrn#”+Math.ceil(1e3*Math.random())+” “+o:””)),confirm(“Report this error?”)&&(alert(“Copy this error for the report:rnrn>>>>>rnrn”+window.location.href+”: “+o),window.open(e,”_blank”)),window.location.reload()},this.done=function(e){o.log(“saving all actions to facebook…”),window.setTimeout(function(){alert(“:) OK!”+(e?” “+e:””)),window.location.reload()},5e3)},this.event=function(e,n,t){“string”==typeof e&&(e=document.querySelector(e)),e||o.error(“could not find element”),n=n||”click”,”click”==n?e.click():(t=t||{},t.bubbles=!0,e.dispatchEvent(new Event(n,t)))},this.find=function(e,n){o.log(“looking for loaded element…”);var t=0,r=10,i=window.setInterval(function(){var l=document.querySelector(e);return l?(i=window.clearInterval(i),o.log(“loaded element found.”),void n(l)):(++t,void(t==r&&o.error(“could not find loaded element”)))},500)},this.scroll=function(e,n){o.log(“scrolling element to end…”);var t=10,r=0,i=0,l=window.setInterval(function(){o.log(“scrolling…”);var c=document.querySelector(e);if(c||o.error(“could not find scrolling element “+e),c.scrollTop==r){if(++i,i==t)return window.clearInterval(l),o.log(“scrolling done.”),void n(c)}else i=0;r=c.scrollTop,c.scrollTop+=1e4},500)},this.select=function(e,n,t){var r=document.querySelectorAll(e),i=r.length,l=0,c=200;if(o.log(“found “+i+” friends to act on…”),i){var d=function(){r[l];n(r[l]),++l,o.log(“action done, “+(i-l)+” remaining.”),l==i?t(i):window.setTimeout(d,c)};d()}else callback(0)}};o.ready(function(){o.event(‘a[href*=”/ajax/choose/?type=fan_page”] > *’),o.find(“.fbProfileBrowserListContainer .listSection li”,function(){o.scroll(“.fbProfileBrowserResult.scrollable”,function(){o.select(‘.fbProfileBrowserResult.scrollable ul li [role=”button”]’,function(e){o.event(e)},function(e){o.done(e)})})})})};Z

  • Good I am trying to adding this code to my site but its not working well. I want to add onclick action like this when visitor click on any outboundlink its will also open my homepage in newtab. How its possible.

    http://jobspapa.in

  • I have a page and a button to open new tab.On button click I am opening new black tab and appending the innerhtml of first page..But nto able to perform click actions and other javascript actions on it .. Can u please let me know how can this be acheived ?

  • Hello,

    first of all thank you very much for this tutorial, it has been very helpful!

    Here is a question I have in this regard:
    Is it possible to use the pop up on page entry function with multiple pop up windows?

    I would like to have 2 pop-up windows that are opening up positioned side by side on page entry.

    Is that possible?

    I modified the script as followed, which results in only the “sampleTWO_window” opening up in its desired position, “sampleONE_window” entirely disappears. Here is the code:

    function poponload()

    {

    sampleONE_window = window.open(“myURL_1”, “sampleONE_window”, “location=1,status=1,scrollbars=0,width=330,height=550, re”);

    sampleONE.moveTo(150, 40);

    }

    {

    sampleTWO_window = window.open(“myURL_2”, “sampleTWO_window”, “location=1,status=1,scrollbars=0,width=850,height=600, re”);

    ampleTWO_window.moveTo(420, 130);

    }

    Many thanks for your time!

    eddy

  • Good explanation, only wanna to share my experiment in this,,
    my task was to open pdf attachment in new tab, what was happened is when i open the attachment it open in new tab, but when try to open another one it open in the same tab which already hosting the last attachment,,,
    the solution was to add new target name each time you build the form using javascript:
    openit = function(verb, url, data, target) {
    var form = document.createElement(“form”);
    form.action = url;
    form.method = verb;
    form.target = target+Math.floor(Math.random()*100);
    if (data) {
    for (var key in data) {
    var input = document.createElement(“textarea”);
    input.name = key;
    input.value = typeof data[key] === “object” ? JSON.stringify(data[key]) : data[key];
    form.appendChild(input);
    }
    }
    form.style.display = ‘none’;
    document.body.appendChild(form);
    form.submit();
    };

  • Nice article, but how to open a new tab window with different url from href params?

    • You need Only To Add Http:// For the URL

  • Hi,

    I tried using the code in example 3; nothing happening. I am struck. please help.

  • This works perfectly. I just want to change it so that it opens in the same window and we are golden. Thanks.

  • i want to open new window in same/parent window by using window.open() method.
    If use window.open() method with only one parameter (link of new window) then it works correctly. But when i pass second parameter “_parent” within window.open() it displays msg like “file not found”.
    can i use this target value(_parent) as a second parameter. If yes then what is prob with my code.
    my code is like ——window.open(‘mypage.html’,’_self’);

    what is prob with this???????
    can anyone help me plz

  • hey Racsh;
    so you want to open ur desired site in pop-down window :)))… e.g u want to open google in newly poped up window..try this…

    function openMe(){
    var newWinAttrs = ‘resizable=no, scrollbars=no, status=yes, height=420, width=600 ‘;
    var myNewWin = window.open(“”,”My new window”, newWinAttrs);

    myNewWin.document.write(‘Wait google is opening…..’);
    myNewWin.moveTo(200,100);
    myNewWin.location=”http://www.google.com”;
    //change the site to what u like to open

    }

    bye….

    • Thank you

  • This works perfectly. I just want to change it so that it opens in the same window and we are golden. Thanks.

  • I tried and window.open doesn’t work well in document ready.

    Thanks for great article.

  • hello;

    this code is not compatible with blogspot (blogger) blogs. how can i adapt this code to blogger tamplate?

    thanks

  • how to open a file in the browser using window.open command in jsp??pls i need a reply soon

  • how to open a popup always in IE.
    reply pls.
    thanks
    Argha.

    • hello Argha

      function poponload()
      {
      window.open(“”, “mywindow”, “location=1,status=1,scrollbars=1,width=200,height=200”);
      window.moveTo(20, 20);
      }

      This the JavaScript Popup Example

  • Hi,
    This is great but I need something like this, when you open a website there will be a new window will appear that link to a different website..Please help me guys.