402

I have a select box that calls window.open(url) when an item is selected. Firefox will open the page in a new tab by default. However, I would like the page to open in a new window, not a new tab.

How can I accomplish this?

adam
  • 6,582
  • 4
  • 29
  • 28

15 Answers15

507

Specify window "features" to the open call:

window.open(url, windowName, "height=200,width=200");

When you specify a width/height, it will open it in a new window instead of a tab.

See https://developer.mozilla.org/en-US/docs/Web/API/Window.open#Position_and_size_features for all the possible features.

Armen Michaeli
  • 8,625
  • 8
  • 58
  • 95
DNS
  • 37,249
  • 18
  • 95
  • 132
  • 5
    Good tip. I think Opera will still open this in a tab though :). – Kevin Tighe Apr 07 '09 at 17:35
  • 2
    Doesn't think it works in FF or Chrome (beta versions of both though, dunno about behavior for non-beta). – CookieOfFortune Apr 07 '09 at 17:36
  • It should work in Firefox (I checked before posting); haven't tried Chrome. And yeah, it's by no means a solid cross-browser solution; the whole situation is kind of a mess. – DNS Apr 07 '09 at 17:56
  • question references firefox, not any other browser –  Apr 07 '09 at 21:08
  • This is correct, although there are certain non-default browser settings (Safari 5 has one, for example) that blocks even this (it instead opens in a new tab and ignores the specified size). – philfreo Jul 05 '10 at 23:02
  • 9
    Working in IE6, FF 3.6, Chrome 9.0 – James Westgate Mar 10 '11 at 11:09
  • 3
    Doesn't work any more in FF 11.0, [see my question](http://stackoverflow.com/questions/9956827/window-openurl-windowname-opts-opens-in-new-tab-instead-of-new-window-in-fir)! @James – Tomas Mar 31 '12 at 14:39
  • 19
    Doesn't work in today's browsers. By default they all open a new windows in a new tab of current window. It also depends on browser options. You cannot control it using JavaScript. – Pavel Hodek Sep 20 '12 at 07:21
  • This it at least not true for Opera and maybe other browsers and should not be relied on – feeela Dec 20 '12 at 10:11
  • 1
    This will not work in IE 11 if you set it to open new windows in a new tab instead. –  May 02 '14 at 22:49
  • 4
    This is NOT the fact you put "height=200,width=200" which perform opening in a new window. This is simply the fact to put extra parameter (location, status etc.... it doesn't matter) – Peter Nov 28 '15 at 11:28
  • Works in Chrome 51 but not FF 47. Just do not rely on it. – JulienD Aug 03 '16 at 08:40
  • This did not work for me, testing with FF 51. nwbrad's answer below still works. – Sam Krygsheld Feb 16 '17 at 18:45
  • 1
    I agree with @Peter as it not only works when you specify the height and width rather it will work always whenever there is a third parameter. I tested it with 'titlebar=yes' and it opens a new window and when i remove 'titlebar=yes' it opens a new tab. – user1451111 Aug 25 '17 at 04:46
  • 1
    `width` and `height` are not enough and not even necessary in newer Chrome versions. You need to specify `menubar=no` to be able to open on a popup. – Darlesson Aug 29 '17 at 18:13
  • This still works in 2020, but make sure you are not using MacOS fullscreen mode. Then no matter what, the link will open in a new tab. – seniorpreacher Apr 03 '20 at 17:01
  • Don't work on Safari... Everybody is tired of popups. FF OK Opera OK Chrome OK I don't even heard about Edge :D – tatactic Sep 27 '22 at 09:48
  • @Darlesson window.open(url, windowName,"args"); works too... Except on Safari (MacOS). – tatactic Sep 27 '22 at 09:50
127

You don't need to use height, just make sure you use _blank, Without it, it opens in a new tab.

For a empty window:

window.open('', '_blank', 'toolbar=0,location=0,menubar=0');

For a specific URL:

window.open('http://www.google.com', '_blank', 'toolbar=0,location=0,menubar=0');
sth
  • 222,467
  • 53
  • 283
  • 367
nwbrad
  • 1,295
  • 1
  • 8
  • 2
  • 4
    But what if i want to give it a name as well? – Aditi Mar 10 '14 at 12:10
  • 1
    At least in Chrome, `location=0` is necessary when the JS is invoked from a button or anchor element. – Ohad Schneider Aug 16 '14 at 11:46
  • 1
    worked perfectly. had to include location=0 as well in firefox. – Rick james Feb 08 '17 at 21:30
  • @nwbrad are you sure about the '_blank' part because as far as I know '_blank' is the default value when we don't specify any other value. In your case, opening a new window instead of a new tab has to do something with providing the 3rd parameter to window.open function. In your case it is 'toolbar=0,location=0,menubar=0'. You can verify it by omitting this third parameter and leaving '_blank' there as the 2nd parameter. – user1451111 Aug 25 '17 at 04:49
  • 1
    Works perfectly in in modern browsers like Firefox 76 and Internet Explorer 11. The tip is adding `location=0` in the parameters. I would also suggest naming the window instead of using using the `_blank` target, so that the same window is used again if the user clicks several times the element that opens the popup, and chaining with `focus()` so that already an opened popup gets the focus : `window.open('http://stackoverflow.com', 'Stack_Overflow','location=0').focus();` – OuzoPower Jun 01 '20 at 11:44
89

I may be wrong, but from what I understand, this is controlled by the user's browser preferences, and I do not believe that this can be overridden.

VXp
  • 11,598
  • 6
  • 31
  • 46
Jordan S. Jones
  • 13,703
  • 5
  • 44
  • 49
  • 1
    You are right, the user can set the "about:config" preference "browser.tabs.opentabfor.windowopen" to true, but that is a global setting and I do not want to change the global behavior of our users browsers ;) – adam Apr 07 '09 at 17:34
  • 50
    I told you I have code that works. I typed this into firebug console: window.open("", "poop", "height=200,width=200,modal=yes,alwaysRaised=yes"); and guess what??? it works!!!!!! –  Apr 07 '09 at 20:42
  • 25
    Yes it works, but this seems to be a bit of a hack. Firefox is written in such a way that opening a new window vs tab is a browser preference, not a javascript preference. Therefore it is feasible that your suggestion wont work the same in a later version of firefox. I'd rather not rely on a hack. – adam Apr 08 '09 at 16:22
  • 2
    And to be clear, I don't mean it's a javascript hack. Adding window height and width are clearly features of the js window.open method (http://www.w3schools.com/HTMLDOM/met_win_open.asp) I mean hack in the sense of manipulating the intended behavior of firefox. – adam Apr 08 '09 at 16:31
  • 2
    I wouldn't really call it a hack, per se. You're just compromising on what behavior you'd actually like to have, and implementing that, instead. – Matchu Dec 09 '09 at 20:02
  • 1
    As of FF5, the hacks on this page don't work, even if you have an exception in the configuration for your site. Works in Chrome 12, but not FF. – boatcoder Jul 21 '11 at 02:56
  • Just provide the width and height and it will become a popup instead of a tab. – Derek 朕會功夫 Jun 19 '12 at 01:07
  • I think PPK has a better write-up on pop-ups than w3schools. http://www.quirksmode.org/js/popup.html – mg1075 Nov 17 '11 at 20:22
  • 1
    Well, guess what? It still works as of September 2012 in Firefox 15! And it works even without using "modal=yes". The "alwaysRaised=yes" attribute is enough to show a popup. I don't care if it stops working a few years later. It's not as if it would break or something. It would just show the content in a tab anyway so it's not a big deal. For now I prefer to show a popup for a PDF printing feature in my web app. – OMA Sep 10 '12 at 11:06
  • @theman_on_vista `window.open("", "poop", "height=200,width=200,modal=yes,alwaysRaised=yes");` still opens a new tab in my Opera, because I have configured it to always open a new tab instead of new windows. – feeela Dec 20 '12 at 10:11
  • It looks like different browsers implement the behavior of `window.open` in different ways, because IE 11 will still open the popup in a new tab if the user set's that as their browser preference. It doesn't seem to be standardized acros all browsers. –  May 02 '14 at 23:00
  • I also believed this was controlled by the browser preferences, but see the trick of adding `location=0` parameter when opening the window. It works and with it both Firefox 76 and Internet Explorer 11 renounce to use their popup blockers. – OuzoPower Jun 01 '20 at 11:48
  • You're right, at some point, it used to be possible. Now it's possible only if you change your default settings, which kind of defies the purpose of new window being reliable if used as a site feature. I came across this post when doing research after finding this video [here](https://www.youtube.com/watch?v=MutrB1aghpw). Nowadays this is mostly handled by in-app own modal window. – InfiniteStack Jun 05 '22 at 13:30
  • Edge, Chrome and Firefox all required me to allow popups before my page would appear, but it did open in a new window. – Steve Nov 22 '22 at 00:55
17

Try:

window.open("", [window name], "height=XXX,width=XXX,modal=yes,alwaysRaised=yes");

I have some code that does what your say, but there is a lot of parameters in it. I think these are the bare minimum, let me know if it doesn't work, I'll post the rest.

arulmr
  • 8,620
  • 9
  • 54
  • 69
  • This works in FF 31 and Chrome 36 using only the "modal=yes" option. All options specified work as well. I also have "Open new windows in new tabs instead" checked in my FF preferences. Without open options, windows open in new tab. – Clint Pachl Apr 28 '15 at 06:38
  • After some more testing, it seems almost any parameters―as long as there is at least one―will open a new window instead of a tab. For example just "top=0" even works in FF 31 and Chrome 36. This is on OpenBSD using the cwm window manager. So results may vary. – Clint Pachl Apr 28 '15 at 07:28
  • May i know, what is [window name]? – pcs Jan 06 '16 at 06:15
12

OK, after making a lot of test, here my concluson:

When you perform:

     window.open('www.yourdomain.tld','_blank');
     window.open('www.yourdomain.tld','myWindow');

or whatever you put in the destination field, this will change nothing: the new page will be opened in a new tab (so depend on user preference)

If you want the page to be opened in a new "real" window, you must put extra parameter. Like:

window.open('www.yourdomain.tld', 'mywindow','location=1,status=1,scrollbars=1, resizable=1, directories=1, toolbar=1, titlebar=1');

After testing, it seems the extra parameter you use, dont' really matter: this is not the fact you put "this parameter" or "this other one" which create the new "real window" but the fact there is new parameter(s).

But something is confused and may explain a lot of wrong answers:

This:

 win1 = window.open('myurl1', 'ID_WIN');
 win2 = window.open('myurl2', 'ID_WIN', 'location=1,status=1,scrollbars=1');

And this:

 win2 = window.open('myurl2', 'ID_WIN', 'location=1,status=1,scrollbars=1');
 win1 = window.open('myurl1', 'ID_WIN');

will NOT give the same result.

In the first case, as you first open a page without extra parameter, it will open in a new tab. And in this case, the second call will be also opened in this tab because of the name you give.

In second case, as your first call is made with extra parameter, the page will be opened in a new "real window". And in that case, even if the second call is made without the extra parameter, it will also be opened in this new "real window"... but same tab!

This mean the first call is important as it decided where to put the page.

Peter
  • 1,247
  • 19
  • 33
9

You might try following function:

<script type="text/javascript">
function open(url)
{
  var popup = window.open(url, "_blank", "width=200, height=200") ;
  popup.location = URL;
}
</script>

The HTML code for execution:

<a href="#" onclick="open('http://www.google.com')">google search</a>
glomad
  • 5,539
  • 2
  • 24
  • 38
jgray
  • 123
  • 1
  • 2
  • 3
    What is the purpose of the `popup.location = URL;`? The `window.open()` call should open it to the proper URL, and in your code example, `URL` is not defined so it is going to fall back to the experimental (and not widely support) [URL object](https://developer.mozilla.org/en-US/docs/Web/API/URL). While using it for that is debatable, I'm curious what the motivations are for its use here? – ken Jun 30 '14 at 16:52
  • Solid answer and taught me how to make the location non-editable. thanks – VirtualProdigy Dec 04 '17 at 00:37
7

You shouldn't need to. Allow the user to have whatever preferences they want.

Firefox does that by default because opening a page in a new window is annoying and a page should never be allowed to do so if that is not what is desired by the user. (Firefox does allow you to open tabs in a new window if you set it that way).

CookieOfFortune
  • 13,836
  • 8
  • 42
  • 58
  • 32
    you are so wrong. and by the way, saying "you shouldnt need to" is not appropriate, especially if it is something the boss wants –  Apr 07 '09 at 17:31
  • Right, I could shift+click a hyperlink, but in this case window.open(url) is executed on the event of selecting a dropdown option. So that method doesn't work. Opening in a new window is an intentional part of the design specs. – adam Apr 07 '09 at 17:31
  • 9
    Lets try and keep the comments practical and helpful. We can disagree without being insulting. – adam Apr 07 '09 at 17:43
  • 17
    @theman_on_vista: Convincing your boss is *your* responsibility. Your company has bestowed on you the responsibility to resolve design issues. This includes pointing out wrong design ideas. – EFraim Jul 19 '10 at 21:10
  • 2
    So true. The screen belongs to the user, and no one else. – Christopher Creutzig Sep 22 '10 at 16:49
  • I think window.open() should just popup confirmation dialog asking user "would u like to open with tab? or new window?" :D – Meow Dec 14 '11 at 04:10
  • maximum inconvenience for everyone, masato-san? :) – ysth Aug 06 '12 at 18:52
  • 13
    It is in the realm of the designer to choose popup or tab. While I am a user that always prefers tabs, I recognize that sometimes, the design really calls for a popup or really calls for a tab. It should be in the realm of the programmer to make it possible. Putting philosophical differences aside, this sort of comment is entirely inappropriate for a programming reference site. And in this case, it is not a "should I?" question. It is "how do I?" – jbenet Aug 15 '12 at 03:52
6

The key is the parameters :

If you provide Parameters [ Height="" , Width="" ] , then it will open in new windows.

If you DON'T provide Parameters , then it will open in new tab.

Tested in Chrome and Firefox

MoniR
  • 1,351
  • 12
  • 18
6

I just tried this with IE (11) and Chrome (54.0.2794.1 canary SyzyASan):

window.open(url, "_blank", "x=y")

... and it opened in a new window.

Which means that Clint pachl had it right when he said that providing any one parameter will cause the new window to open.

-- and apparently it doesn't have to be a legitimate parameter!

(YMMV - as I said, I only tested it in two places...and the next upgrade might invalidate the results, any way)

ETA: I just noticed, though - in IE, the window has no decorations.

Community
  • 1
  • 1
theGleep
  • 1,179
  • 8
  • 14
6

For me the solution was to have

"location=0"

in the 3rd parameter. Tested on latest FF/Chrome and an old version of IE11

Full method call I use is below (As I like to use a variable width):

window.open(url, "window" + id, 'toolbar=0,location=0,scrollbars=1,statusbar=1,menubar=0,resizable=1,width=' + width + ',height=800,left=100,top=50');
DAustin
  • 371
  • 2
  • 10
5

Interestingly, I found that if you pass in an empty string (as opposed to a null string, or a list of properties) for the third attribute of window.open, it would open in a new tab for Chrome, Firefox, and IE. If absent, the behavior was different.

So, this is my new call:

 window.open(url, windowName, '');
Tom Lianza
  • 4,012
  • 4
  • 41
  • 50
  • Isn't the original poster trying to open popups in a new window though? Also, in IE 11, the code snippet you gave will open a new window or tab based on the user's browser preference. –  May 02 '14 at 23:04
4

try that method.....

function popitup(url) {
       //alert(url);
       newwindow=window.open("http://www.zeeshanakhter.com","_blank","toolbar=yes,scrollbars=yes, resizable=yes, top=500, left=500, width=400, height=400");
       newwindow.moveTo(350,150);
   if (window.focus) 
          {
             newwindow.focus()
          }
   return false;
  }
Zeeshan Akhter
  • 1,881
  • 20
  • 19
1

Answered here. But posting it again for reference.

window.open() will not open in new tab if it is not happening on actual click event. In the example given the url is being opened on actual click event. This will work provided user has appropriate settings in the browser.

<a class="link">Link</a>
<script  type="text/javascript">
     $("a.link").on("click",function(){
         window.open('www.yourdomain.com','_blank');
     });
</script>

Similarly, if you are trying to do an ajax call within the click function and want to open a window on success, ensure you are doing the ajax call with async : false option set.

Community
  • 1
  • 1
Venkat Kotra
  • 10,413
  • 3
  • 49
  • 53
1

I think its not html target properties problem but you unchecked "open nw windows in a new tab instead" option in "tab" tab under firefox "options" menu. check it and try again.

enter image description here

shihab mm
  • 505
  • 5
  • 15
1

I had this same question but found a relatively simple solution to it.

In JavaScript I was checking for window.opener !=null; to determine if the window was a pop up. If you're using some similar detection code to determine if the window you're site is being rendered in is a pop up you can easily "turn it off" when you want to open a "new" window using the new windows JavaScript.

Just put this at the top of your page you want to always be a "new" window.

<script type="text/javascript">
    window.opener=null;
</script>

I use this on the log in page of my site so users don't get pop up behavior if they use a pop up window to navigate to my site.

You could even create a simple redirect page that does this and then moves to the URL you gave it. Something like,

JavaScript on parent page:

window.open("MyRedirect.html?URL="+URL, "_blank");

And then by using a little javascript from here you can get the URL and redirect to it.

JavaScript on Redirect Page:

 <script type="text/javascript">
        window.opener=null;

    function getSearchParameters() {
          var prmstr = window.location.search.substr(1);
          return prmstr != null && prmstr != "" ? transformToAssocArray(prmstr) : {};
    }

    function transformToAssocArray( prmstr ) {
        var params = {};
        var prmarr = prmstr.split("&");
        for ( var i = 0; i < prmarr.length; i++) {
            var tmparr = prmarr[i].split("=");
            params[tmparr[0]] = tmparr[1];
        }
        return params;
    }

    var params = getSearchParameters();
    window.location = params.URL;
    </script>
Community
  • 1
  • 1
Dan
  • 2,625
  • 7
  • 39
  • 52