2395
votes

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.

30
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.Jared Farrish
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
How can I configure Chrome to display it in a new tab, as opposed to a popup?Mark
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 PITASergio
@Sergio, that's the default browser behavior for any link. (For Chrome and Firefox at least.) Has nothing to do with Gmail.Qtax

30 Answers

1053
votes

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.

1997
votes

This is a trick,

function openInNewTab(url) {
 window.open(url, '_blank').focus();
}

//or just
window.open(url, '_blank').focus();

In most cases, this should happen directly in the onclick handler for the link to prevent pop-up blockers, and the default "new window" behavior. You could do it this way, or by adding an event listener to your DOM object.

<div onclick="openInNewTab('www.test.com');">Something To Click On</div>

http://www.tutsplanet.com/open-url-new-tab-using-javascript/

405
votes

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.

280
votes
function openInNewTab(href) {
  Object.assign(document.createElement('a'), {
    target: '_blank',
    href: href,
  }).click();
}

It creates a virtual a element, gives it target="_blank" so it opens in a new tab, gives it proper url href and then clicks it.

and then you can use it like:

openInNewTab("https://google.com"); 

Important note:

openInNewTab (as well as any other solution on this page) must be called during the so-called 'trusted event' callback - eg. during click event (not necessary in callback function directly, but during click action). Otherwise opening a new page will be blocked by the browser

If you call it manually at some random moment (e.g., inside an interval or after server response) - it might be blocked by the browser (which makes sense as it'd be a security risk and might lead to poor user experience)

258
votes

window.open Cannot Reliably Open Popups in a New Tab in All Browsers

Different browsers implement the behavior of window.open in different ways, especially with regard to a user's browser preferences. You cannot expect the same behavior for window.open to be true across all of Internet Explorer, Firefox, and Chrome, because of the different ways in which they handle a user's browser preferences.

For example, Internet Explorer (11) users can choose to open popups in a new window or a new tab, you cannot force Internet Explorer 11 users to open popups in a certain way through window.open, as alluded to in Quentin's answer.

As for Firefox (29) users, using window.open(url, '_blank') depends on their browser's tab preferences, though you can still force them to open popups in a new window by specifying a width and height (see "What About Chrome?" section below).

Demonstration

Go to your browser's settings and configure it to open popups in a new window.

Internet Explorer (11)

Internet Explorer settings dialog 1

Internet Explorer tab settings dialog

Test Page

After setting up Internet Explorer (11) to open popups in a new window as demonstrated above, use the following test page to test window.open:

<!DOCTYPE html>
<html>
  <head>
    <title>Test</title>
  </head>

  <body>
    <button onclick="window.open('https://stackoverflow.com/q/4907843/456814');">
      <code>window.open(url)</code>
    </button>
    <button onclick="window.open('https://stackoverflow.com/q/4907843/456814', '_blank');">
      <code>window.open(url, '_blank')</code>
    </button>
  </body>
</html>

Observe that the popups are opened in a new window, not a new tab.

You can also test those snippets above in Firefox (29) with its tab preference set to new windows, and see the same results.

What About Chrome? It Implements window.open Differently from Internet Explorer (11) and Firefox (29).

I'm not 100% sure, but it looks like Chrome (version 34.0.1847.131 m) does not appear to have any settings that the user can use to choose whether or not to open popups in a new window or a new tab (like Firefox and Internet Explorer have). I checked the Chrome documentation for managing pop-ups, but it didn't mention anything about that sort of thing.

Also, once again, different browsers seem to implement the behavior of window.open differently. In Chrome and Firefox, specifying a width and height will force a popup, even when a user has set Firefox (29) to open new windows in a new tab (as mentioned in the answers to JavaScript open in a new window, not tab):

<!DOCTYPE html>
<html>
  <head>
    <title>Test</title>
  </head>

  <body>
    <button onclick="window.open('https://stackoverflow.com/q/4907843/456814', 'test', 'width=400, height=400');">
      <code>window.open(url)</code>
    </button>
  </body>
</html>

However, the same code snippet above will always open a new tab in Internet Explorer 11 if users set tabs as their browser preferences, not even specifying a width and height will force a new window popup for them.

So the behavior of window.open in Chrome seems to be to open popups in a new tab when used in an onclick event, to open them in new windows when used from the browser console (as noted by other people), and to open them in new windows when specified with a width and a height.

Summary

Different browsers implement the behavior of window.open differently with regard to users' browser preferences. You cannot expect the same behavior for window.open to be true across all of Internet Explorer, Firefox, and Chrome, because of the different ways in which they handle a user's browser preferences.

Additional Reading

93
votes

If you use window.open(url, '_blank'), it will be blocked (popup blocker) on Chrome.

Try this:

//With JQuery

$('#myButton').click(function () {
    var redirectWindow = window.open('http://google.com', '_blank');
    redirectWindow.location;
});

With pure JavaScript,

document.querySelector('#myButton').onclick = function() {
    var redirectWindow = window.open('http://google.com', '_blank');
    redirectWindow.location;
};
73
votes

To elaborate Steven Spielberg's answer, I did this in such a case:

$('a').click(function() {
  $(this).attr('target', '_blank');
});

This way, just before the browser will follow the link I'm setting the target attribute, so it will make the link open in a new tab or window (depends on user's settings).

One line example in jQuery:

$('a').attr('target', '_blank').get(0).click();
// The `.get(0)` must be there to return the actual DOM element.
// Doing `.click()` on the jQuery object for it did not work.

This can also be accomplished just using native browser DOM APIs as well:

document.querySelector('a').setAttribute('target', '_blank');
document.querySelector('a').click();
71
votes

I use the following and it works very well!

window.open(url, '_blank').focus();
20
votes

I think that you can't control this. If the user had setup their browser to open links in a new window, you can't force this to open links in a new tab.

JavaScript open in a new window, not tab

19
votes

An interesting fact is that the new tab can not be opened if the action is not invoked by the user (clicking a button or something) or if it is asynchronous, for example, this will NOT open in new tab:

$.ajax({
    url: "url",
    type: "POST",
    success: function() {
        window.open('url', '_blank');              
    }
});

But this may open in a new tab, depending on browser settings:

$.ajax({
    url: "url",
    type: "POST",
    async: false,
    success: function() {
        window.open('url', '_blank');              
    }
});
14
votes

Just omitting [strWindowFeatures] parameters will open a new tab, UNLESS the browser setting overrides (browser setting trumps JavaScript).

New window

var myWin = window.open(strUrl, strWindowName, [strWindowFeatures]);

New tab

var myWin = window.open(strUrl, strWindowName);

-- or --

var myWin = window.open(strUrl);
12
votes
(function(a){
document.body.appendChild(a);
a.setAttribute('href', location.href);
a.dispatchEvent((function(e){
    e.initMouseEvent("click", true, true, window, 0, 0, 0, 0, 0, true, false, false, false, 0, null);
    return e
}(document.createEvent('MouseEvents'))))}(document.createElement('a')))
12
votes

This has nothing to do with browser settings if you are trying to open a new tab from a custom function.

In this page, open a JavaScript console and type:

document.getElementById("nav-questions").setAttribute("target", "_blank");
document.getElementById("nav-questions").click();

And it will try to open a popup regardless of your settings, because the 'click' comes from a custom action.

In order to behave like an actual 'mouse click' on a link, you need to follow @spirinvladimir's advice and really create it:

document.getElementById("nav-questions").setAttribute("target", "_blank");
document.getElementById("nav-questions").dispatchEvent((function(e){
  e.initMouseEvent("click", true, true, window, 0, 0, 0, 0, 0,
                    false, false, false, false, 0, null);
  return e
}(document.createEvent('MouseEvents'))));

Here is a complete example (do not try it on jsFiddle or similar online editors, as it will not let you redirect to external pages from there):

<!DOCTYPE html>
<html>
<head>
  <style>
    #firing_div {
      margin-top: 15px;
      width: 250px;
      border: 1px solid blue;
      text-align: center;
    }
  </style>
</head>
<body>
  <a id="my_link" href="http://www.google.com"> Go to Google </a>
  <div id="firing_div"> Click me to trigger custom click </div>
</body>
<script>
  function fire_custom_click() {
    alert("firing click!");
    document.getElementById("my_link").dispatchEvent((function(e){
      e.initMouseEvent("click", true, true, window, /* type, canBubble, cancelable, view */
            0, 0, 0, 0, 0,              /* detail, screenX, screenY, clientX, clientY */
            false, false, false, false, /* ctrlKey, altKey, shiftKey, metaKey */
            0, null);                   /* button, relatedTarget */
      return e
    }(document.createEvent('MouseEvents'))));
  }
  document.getElementById("firing_div").onclick = fire_custom_click;
</script>
</html>
12
votes

You can use a trick with form:

$(function () {
    $('#btn').click(function () {
        openNewTab("http://stackoverflow.com")
        return false;
    });
});

function openNewTab(link) {
    var frm = $('<form   method="get" action="' + link + '" target="_blank"></form>')
    $("body").append(frm);
    frm.submit().remove();
}

jsFiddle demo

12
votes
function openTab(url) {
  const link = document.createElement('a');
  link.href = url;
  link.target = '_blank';
  document.body.appendChild(link);
  link.click();
  link.remove();
}
9
votes

Whether to open the URL in a new tab or a new window, is actually controlled by the user's browser preferences. There is no way to override it in JavaScript.

window.open() behaves differently depending on how it is being used. If it is called as a direct result of a user action, let us say a button click, it should work fine and open a new tab (or window):

const button = document.querySelector('#openTab');

// add click event listener
button.addEventListener('click', () => {
    // open a new tab
    const tab = window.open('https://attacomsian.com', '_blank');
});

However, if you try to open a new tab from an AJAX request callback, the browser will block it as it was not a direct user action.

To bypass the popup blocker and open a new tab from a callback, here is a little hack:

const button = document.querySelector('#openTab');

// add click event listener
button.addEventListener('click', () => {

    // open an empty window
    const tab = window.open('about:blank');

    // make an API call
    fetch('/api/validate')
        .then(res => res.json())
        .then(json => {

            // TODO: do something with JSON response

            // update the actual URL
            tab.location = 'https://attacomsian.com';
            tab.focus();
        })
        .catch(err => {
            // close the empty window
            tab.close();
        });
});
4
votes

JQuery

$('<a />',{'href': url, 'target': '_blank'}).get(0).click();

JS

Object.assign(document.createElement('a'), { target: '_blank', href: 'URL_HERE'}).click();
3
votes

Or you could just create a link element and click it...

var evLink = document.createElement('a');
evLink.href = 'http://' + strUrl;
evLink.target = '_blank';
document.body.appendChild(evLink);
evLink.click();
// Now delete it
evLink.parentNode.removeChild(evLink);

This shouldn't be blocked by any popup blockers... Hopefully.

3
votes

There is an answer to this question and it is not no.

I found an easy work around:

Step 1: Create an invisible link:

<a id="yourId" href="yourlink.html" target="_blank" style="display: none;"></a>

Step 2: Click on that link programmatically:

document.getElementById("yourId").click();

Here you go! Works a charm for me.

3
votes

Do not use target="_blank"

Always use specific name for that window in my case meaningfulName, in this case you save processor resource:

button.addEventListener('click', () => {
    window.open('https://google.com', 'meaningfulName')
})

On this way when you click for example 10 times on button, browser will always re-render it in one new tab, instead of opening it in 10 different tabs which will consume much more resources.

You can read more about this on MDN.

2
votes

enter image description here

I researched a lot of information about how to open new tab and stay on the same tab. I have found one small trick to do it. Lets assume you have url which you need to open - newUrl and old url - currentUrl, which you need to stay on after new tab opened. JS code will look something like next:

// init urls
let newUrl = 'http://example.com';
let currentUrl = window.location.href;
// open window with url of current page, you will be automatically moved 
// by browser to a new opened tab. It will look like your page is reloaded
// and you will stay on same page but with new page opened
window.open(currentUrl , '_blank');
// on your current tab will be opened new url
location.href = newUrl;
0
votes

How about creating an <a> with _blank as target attribute value and the url as href, with style display:hidden with a a children element? Then add to the DOM and then trigger the click event on a children element.

UPDATE

That doesn't work. The browser prevents the default behaviour. It could be triggered programmatically, but it doesn't follow the default behaviour.

Check and see for yourself: http://jsfiddle.net/4S4ET/

0
votes

This might be a hack, but in Firefox if you specify a third parameter, 'fullscreen=yes', it opens a fresh new window.

For example,

<a href="#" onclick="window.open('MyPDF.pdf', '_blank', 'fullscreen=yes'); return false;">MyPDF</a>

It seems to actually override the browser settings.

-1
votes

Opening a new tab from within a Firefox (Mozilla) extension goes like this:

gBrowser.selectedTab = gBrowser.addTab("http://example.com");
-1
votes

This way is similar to the above solution but implemented differently

.social_icon -> some class with CSS

 <div class="social_icon" id="SOME_ID" data-url="SOME_URL"></div>


 $('.social_icon').click(function(){

        var url = $(this).attr('data-url');
        var win = window.open(url, '_blank');  ///similar to above solution
        win.focus();
   });
-1
votes

this work for me, just prevent the event, add the url to an <a> tag then trigger the click event on that tag.

Js
$('.myBtn').on('click', function(event) {
        event.preventDefault();
        $(this).attr('href',"http://someurl.com");
        $(this).trigger('click');
});
HTML
<a href="#" class="myBtn" target="_blank">Go</a>
-1
votes

The window.open(url) will open url in new browser Tab. Belowe JS alternative to it

let a= document.createElement('a');
a.target= '_blank';
a.href= 'https://support.wwf.org.uk/';
a.click(); // we don't need to remove 'a' from DOM because we not add it

here is working example (stackoverflow snippets not allow to opening new tab)

-1
votes

There are lots of answer copies suggesting using "_blank" as the target, however I found this didn't work. As Prakash notes, it is up to the browser. However, you can make certain suggestions to the browser, such as to whether the window should have a location bar.

If you suggest enough "tab-like things" you might get a tab, as per Nico's answer to this more specific question for chrome:

window.open('http://www.stackoverflow.com', '_blank', 'toolbar=yes, location=yes, status=yes, menubar=yes, scrollbars=yes');

Disclaimer: This is not a panacea. It is still up to the user and browser. Now at least you've specified one more preference for what you'd like your window to look like.

-4
votes

I'm going to agree somewhat with the person who wrote (paraphrased here): "For a link in an existing web page, the browser will always open the link in a new tab if the new page is part of the same web site as the existing web page." For me, at least, this "general rule" works in Chrome, Firefox, Opera, IE, Safari, SeaMonkey, and Konqueror.

Anyway, there is a less complicated way to take advantage of what the other person presented. Assuming we are talking about your own web site ("thissite.com" below), where you want to control what the browser does, then, below, you want "specialpage.htm" to be EMPTY, no HTML at all in it (saves time sending data from the server!).

 var wnd, URL;  //global variables

 //specifying "_blank" in window.open() is SUPPOSED to keep the new page from replacing the existing page
 wnd = window.open("http://www.thissite.com/specialpage.htm", "_blank"); //get reference to just-opened page
 //if the "general rule" above is true, a new tab should have been opened.
 URL = "http://www.someothersite.com/desiredpage.htm";  //ultimate destination
 setTimeout(gotoURL(),200);  //wait 1/5 of a second; give browser time to create tab/window for empty page


 function gotoURL()
 { wnd.open(URL, "_self");  //replace the blank page, in the tab, with the desired page
   wnd.focus();             //when browser not set to automatically show newly-opened page, this MAY work
 }
-7
votes

If you only want to open the external links (links that go to other sites) then this bit of JavaScript/jQuery works well:

$(function(){
    var hostname = window.location.hostname.replace('www.', '');
    $('a').each(function(){
        var link_host = $(this).attr('hostname').replace('www.', '');
        if (link_host !== hostname) {
            $(this).attr('target', '_blank');
        }
    });
});