How can I open a link in new tab (and not new window)? [duplicate]

74
votes

I have an 'Open' button that 'calculates' a link that should be opened in a new tab. I try to use:

window.open(url, '_blank');

But that opens a new window.

I also tried the following method:

<form id="oform" name="oform" action="" method="post" target="_blank">
</form>

...

document.getElementById("oform").action = url;
document.getElementById("oform").submit();

Still, a new window is opened, instead of a new tab.

When using simple <a href...> with target='blank', the link is opened in a new tab.

Is there a solution?

7
javascripthtml
In Chrome a <form target="_blank"> opens in a new tab when submitted, so it depends on the browser. – pimvdb
i use chrome, and yet it opens in new window instead of new tab – Erik Sapir

7 Answers

68
votes

Update [2019] Most browsers today open in a new tab when you set the target to _blank. The days of popup windows is long gone. We can now use:

 <a href="some url" target="_blank">content of the anchor</a>

Most sane browsers will open the new window in a new tab.

CSS3 supports "open in new tab", by the property target-new

target-new: window | tab | none;

Update [2016]: this method never made it into the CSS3 spec, as one of the comments indicates. This shouldn't be used. However, it can be seen that most modern browsers open target='_blank' links in a new tab anyway, unless one attempts to resize the new tab immediately thereafter. However, there does not appear to be a mechanism to force this behavior in the specifications.

[2011] For a method of forcing opening in a new tab that is well supported, try the following:

<a href="some url" target="_newtab">content of the anchor</a>

Else, use this method to resize window immediately, to ensure that popup blockers do not kill your popup

9
votes

Other than the CSS3 target-new option @anirudh4444 mentioned, you can't and mostly importantly probably shouldn't. You are trying to control the user's experience, when this should most likely be left up to the user.

7
votes

You can use any of the following, I tested them all in 6 different browsers. (Google Chrome, Mozilla Firefox, Microsoft Internet Explorer, Opera, K-meleon* and Seamonkey.)

  1. <a href="blaah" target="_blank">Blaah</a>
  2. <a href="blaah" target="_tab">Blaah</a>
  3. <a href="blaah" target="_new">Blaah</a>

They all work the exact same, and the choice is completely up to preference.

*K-meleon, for some reason just opened up the page I was on when I clicked the link.

3
votes

I was able to solve this issue using a "form" element.

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

For complete implementation and details visit my post http://mukesh.in/force-open-new-tab-in-browsers-instead-of-windows/

Or see this JSFiddle

1
votes

Your form has target="_blank" (including a leading underscore) while your simple link has the target='blank' without the leading underscore. The "_blank" is a reserved word specifying a particular action, but "blank" is the name of a specific, possibly new, window. That's why you're getting different results. Both are pop-ups, but different types.

Each user has ultimate control about whether a pop-up should open a new window or a new tab. There's nothing you can do about it.

0
votes

The following works in Chrome:

<script>
    function buildAndGo() {
        var aEl = document.getElementById('missingLink');
        aEl.href = "#" + resultOfSomeCalculation();

        var e = document.createEvent('MouseEvents');
        e.initEvent( 'click', true, true );

        aEl.dispatchEvent(e);
    }
</script>
...
<button onclick="buildAndGo()">Do it</button>
<a href="#" id="missingLink" target="_blank" style="visibility: hidden;"></a>

Working from the following sources to try and get an IE version working: Selenium BrowserBot, YUI User Action

-3
votes

In case of a link yes only using target tag would work.

But In case of a button try doing this with the onclick function instead of using just _blank

Use the window.open(url, target) function instead - it takes a URL, and a target window name, which behaves the same as the target="something" attribute on a link....like this

button(type="button", onclick="window.open('auth/google', '_blank');")

This should work.