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

Question

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?

In Chrome a `
` opens in a new tab when submitted, so it depends on the browser. — pimvdb, Jun 09 '11 at 16:21
i use chrome, and yet it opens in new window instead of new tab — Erik Sapir, Jun 09 '11 at 16:22

Anirudh Ramanathan · Answer 1 · 2019-06-06T23:12:21.800

69

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

edited Jun 06 '19 at 23:12

answered Jun 09 '11 at 16:20

Anirudh Ramanathan

46,179
22
132
191

not sure i understand how to use it – Erik Sapir Jun 09 '11 at 16:27
@Erik It will be a while before these browsers start supporting that. For now, all you can do is change the about:config in firefox, to force that behavior. – Anirudh Ramanathan Jun 09 '11 at 16:31
but how some sites manage to do that? – Erik Sapir Jun 09 '11 at 16:32
This supposedly works in firefox content of the anchor – Anirudh Ramanathan Jun 09 '11 at 16:33
As i said in the main message, when using it works as a charm and the link is opened in a new tab. – Erik Sapir Jun 09 '11 at 16:37
Try this approach http://www.paulsilver.co.uk/code/html_working_popup.php – Anirudh Ramanathan Jun 09 '11 at 16:43
I have to agree with Kon, you are removing the choice from the user and should think carefully about that. Each user has his / her preference and their workflow enables said preference. Making this choice for them takes away their preference e.g. (middle-click becomes mute). However, I can think of some cases that this is desired e.g. dialogues, receipts, prints, etc. – avanderw Nov 27 '13 at 07:20
`_newtab` works, yes, but it's not W3C compliant. – Joel DeWitt Mar 16 '15 at 23:38
At this time, `_newtab` doesn't seem to work in Opera, which probably means it also doesn't work in Chrome. – Charles Wood Sep 21 '15 at 16:44
It doesn't seem like this made it into CSS3 either; it's not mentioned in [W3C:s CSS Reference](http://www.w3schools.com/cssref/), nor in its [table over CSS3 browser support](http://www.w3schools.com/cssref/css3_browsersupport.asp). – Tomas Aschan Nov 04 '15 at 08:19
@TomasLycken It is not. The one linked in this answer is a very old [Working Draft (24 February 2004)](https://www.w3.org/TR/2004/WD-css3-hyperlinks-20040224/). If you clicked on the [latest version (14 October 2014)](https://www.w3.org/TR/css3-hyperlinks/) it says that "... The specification is no longer being developed" With that said, I don't think we should use W3School as the _only_ source of truth. – widyakumara Feb 11 '16 at 05:51

score 9 · Answer 2 · edited Jan 16 '13 at 02:20

9

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.

edited Jan 16 '13 at 02:20

Yehuda Katz

28,535
12
89
91

answered Jun 09 '11 at 16:22

Kon

27,113
11
60
86

I know some sites in which clicking a 'Login' button opens a new tab – Erik Sapir Jun 09 '11 at 16:28
3

Does that make it right? – Kon Jun 09 '11 at 16:39
Many of the browsers block pop-ups. I want the link to be opened in new tab so it would not be blocked – Erik Sapir Jun 09 '11 at 16:41
1

I'm not sure that will stop it from being blocked. There are pop-up blockers that also prevent new tabs from spawning. Your best bet (taking user experience into consideration) is to do a lightbox/modal effect without trying to manipulate the physical browser window/tab collection. That's just my two cents. – Kon Jun 09 '11 at 16:46
If you're worried about your window being "blocked", don't be. If a user clicks on a normal link, the browser will not block that window. If you are using Javascript to open this new link, then you might have a problem. – Wex Jun 09 '11 at 16:49
Than i have a problem :P. I do use javascript – Erik Sapir Jun 09 '11 at 16:50

Ben · Answer 3 · 2016-10-12T01:15:53.220

7

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.)

<a href="blaah" target="_blank">Blaah</a>
<a href="blaah" target="_tab">Blaah</a>
<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.

edited Oct 12 '16 at 01:15

answered Jul 17 '14 at 00:21

Ben

2,200
20
30

1

See http://stackoverflow.com/a/4964223/18192 . Though they might all work, `_blank` is recommended. – Brian May 08 '15 at 17:45
2

They might all work the first time you click such a link. But the second time you click such a link, it might open a new tab or it might open that URL in the same tab it used the last time. Only `target="_blank"` is defined to always use a new tab (or window if your browser is configured that way). – Jesse Chisholm Jun 17 '15 at 15:13

Mukesh Agarwal · Answer 4 · 2014-01-02T20:15:25.310

3

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

edited Jan 02 '14 at 20:15

answered Jan 02 '14 at 09:29

Mukesh Agarwal

392
4
13

3

While this link may answer the question, it is better to include the essential parts of the answer here and provide the link for reference. Link-only answers can become invalid if the linked page changes. – Irvin Dominin Jan 02 '14 at 11:26
first link is broken – Dairo Dec 03 '14 at 09:44

score 1 · Answer 5 · answered Jun 09 '11 at 18:45

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.

score 0 · Answer 6 · answered Jun 09 '11 at 18:13

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

score -3 · Answer 7 · answered Feb 11 '14 at 14:03

-3

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.

answered Feb 11 '14 at 14:03

Nikhil Nanjappa

6,454
3
28
44

2

`window.open(url, '_blank');` is exactly the code that the OP says doesn't work. – RichieHindle Feb 11 '14 at 14:26

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

7 Answers7

Linked

Related