Categories
href javascript tabs

Open a URL in a new tab (and not a new window)

2642

I’m trying to open a URL in a new tab, as opposed to a popup window.

I’ve seen related questions where the responses would look something like:

window.open(url,'_blank');
window.open(url);

But none of them worked for me, the browser still tried to open a popup window.

16

  • 94

    This is usually a matter of preference. Some people like windows (and fiercely protect this behavior), some tabs (and fiercely protect this behavior). So you would be defeating a behavior that is generally considered to be a matter of taste, not design.

    Feb 5, 2011 at 15:57

  • 50

    Javascript knows nothing about your browser and tabs vs windows, so it is really up to the browser to decide how to open a new window.

    – Andrey

    Feb 5, 2011 at 15:58

  • 6

    How can I configure Chrome to display it in a new tab, as opposed to a popup?

    – Mark

    Feb 5, 2011 at 15:58

  • 12

    Gmail does this somehow, at least in Chrome. Shift+click on an email row and you open that email in a new window. Ctrl+click and you open it in a new tab. Only problem: digging into gmail’s obfuscated code is a PITA

    – Sergio

    Jun 3, 2013 at 16:26

  • 56

    @Sergio, that’s the default browser behavior for any link. (For Chrome and Firefox at least.) Has nothing to do with Gmail.

    – Qtax

    Aug 1, 2013 at 20:28

1105

Nothing an author can do can choose to open in a new tab instead of a new window; it is a user preference. (Note that the default user preference in most browsers is for new tabs, so a trivial test on a browser where that preference hasn’t been changed will not demonstrate this.)

CSS3 proposed target-new, but the specification was abandoned.

The reverse is not true; by specifying certain window features for the window in the third argument of window.open(), you can trigger a new window when the preference is for tabs.

8

  • 3

    How come this is the accepted answer? I’ve tested the below given answers from duke and arikfr and they work perfectly fine in FF, Chrome and Opera except IE (where it doesn’t work) and Safari (where it opens in new window instead of new tab).

    Apr 5, 2013 at 7:15


  • 49

    @AliHaideri The Javascript has nothing to do with how the new tab/window is opened. It’s all determined by your browser’s settings. Using window.open tells the browser to open something new, then the browser opens up what is chosen in its settings – tab or window. In the browsers you tested with, change the settings to open in a new window instead of a tab and you’ll see the others’ solutions are wrong.

    – Ian

    Apr 18, 2013 at 13:53


  • 290

    Two things that waste other people’s time more than telling them something can’t be done. (1) Telling them something that can’t be done can be done. (2) Staying silent and letting them keep looking for a way to do something that can’t be done.

    – Quentin

    Dec 6, 2013 at 8:15

  • 1

    @Luke: If it’s a question of how to get this functionality only in your own browser, it’s probably a question for the SuperUsers site.

    – Trevor

    Apr 7, 2014 at 20:36

  • 2

    @Bondye — The question is asking about new tabs instead of new windows. The fact you get new windows is rather the point.

    – Quentin

    Apr 14, 2014 at 14:32


1105

Nothing an author can do can choose to open in a new tab instead of a new window; it is a user preference. (Note that the default user preference in most browsers is for new tabs, so a trivial test on a browser where that preference hasn’t been changed will not demonstrate this.)

CSS3 proposed target-new, but the specification was abandoned.

The reverse is not true; by specifying certain window features for the window in the third argument of window.open(), you can trigger a new window when the preference is for tabs.

8

  • 3

    How come this is the accepted answer? I’ve tested the below given answers from duke and arikfr and they work perfectly fine in FF, Chrome and Opera except IE (where it doesn’t work) and Safari (where it opens in new window instead of new tab).

    Apr 5, 2013 at 7:15


  • 49

    @AliHaideri The Javascript has nothing to do with how the new tab/window is opened. It’s all determined by your browser’s settings. Using window.open tells the browser to open something new, then the browser opens up what is chosen in its settings – tab or window. In the browsers you tested with, change the settings to open in a new window instead of a tab and you’ll see the others’ solutions are wrong.

    – Ian

    Apr 18, 2013 at 13:53


  • 290

    Two things that waste other people’s time more than telling them something can’t be done. (1) Telling them something that can’t be done can be done. (2) Staying silent and letting them keep looking for a way to do something that can’t be done.

    – Quentin

    Dec 6, 2013 at 8:15

  • 1

    @Luke: If it’s a question of how to get this functionality only in your own browser, it’s probably a question for the SuperUsers site.

    – Trevor

    Apr 7, 2014 at 20:36

  • 2

    @Bondye — The question is asking about new tabs instead of new windows. The fact you get new windows is rather the point.

    – Quentin

    Apr 14, 2014 at 14:32


421

window.open() will not open in a new tab if it is not happening on the actual click event. In the example given the URL is being opened on the actual click event. This will work provided the 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 the async : false option set.

5

  • 31

    Would be nice to mark this one as the CORRECT answer. My tests with Chrome v26 (Windows) confirm that if the code is within a button’s click handler it opens a new tab and if the code is invoked programmatically, e.g. from the console, then it opens a new window.

    Apr 5, 2013 at 5:26


  • 2

    @Ian From my testing on browsers with default settings, this answer works in cases where the answers above do not. The accepted answer which says “there is nothing you can do” is only true when the user has changed the default settings.

    – Garfield

    Apr 19, 2013 at 18:46

  • @Ian For sake of clarity, I mentioned this in answer warning about user settings. “This will work provided user has appropriate settings in the browser.” I think majority of users don’t change browser settings and this answer works for majority of them.

    Apr 20, 2013 at 7:23

  • 1

    async: false doesn’t work in Chrome. To open a new window from the callback, you need to first open an empty window before sending the HTTP request and later update it. Here is a good hack.

    Feb 24, 2020 at 20:33

  • does one not need an e.preventDefault() ?

    May 30 at 8:41