link with target="_blank" does not open in new tab in Chrome

Question

On this website, the top accordion navigation contains an element called "Foundation": (screenshot).

This element is produced by HTML code:

<a href="http://www.foracure.org.au" target="_blank" style="width: 105px;"></a>

However, in Chrome, when you click on this element, the new website does not open in a new tab.

Can you please tell me why? Thank you.

Works for me as expected, the target is opened in a new tab. — arkascha, Apr 04 '15 at 08:03
Thanks @arkascha. I edited the question to indicate the problem occurs in Chrome. — Steve, Apr 04 '15 at 08:14
I am using a chromium browser. Works for me. So apparently it is an effect of whatever google adds to the fine chromium browser for its chrome version. — arkascha, Apr 04 '15 at 08:17

Anurag · Answer 1 · 2015-04-04T08:29:29.097

35

Replace 

<a href="http://www.foracure.org.au" target="_blank"></a>    

with 

<a href="#" onclick='window.open("http://www.foracure.org.au");return false;'></a>

in your code and will work in Chrome and other browsers.

Thanks Anurag

edited Apr 04 '15 at 08:29

answered Apr 04 '15 at 08:22

Anurag

469
3
5

3

This will work. However as mentioned by Jack, this will break if javascript isn't supported. MDN suggests to never use this and gives several reasons. Hope this helps: https://developer.mozilla.org/en-US/docs/Web/API/Window/open#Never_use_this_form_of_code_for_links_%3Ca_hrefjavascriptwindow.open(...)_...%3E – sdw Jul 08 '17 at 05:49
2

This is not a good replacement as this might hinder crawling of these links – Sahil Sharma Nov 11 '17 at 08:21
unfortunately not work in app browser instagram =( – jonathasborges1 Dec 28 '20 at 13:17
JS does not work with emails so if this code is in email it is not good – Ohad the Lad Apr 20 '21 at 12:55
Thank you so much @Anurag. You literally saved my life! :) – Simon Feb 09 '22 at 22:56

score 25 · Answer 2 · edited Feb 05 '21 at 19:37

Because JavaScript is handling the click event. When you click, the following code is called:

el.addEvent('click', function(e){
    if(obj.options.onOpen){
        new Event(e).stop();
        if(obj.options.open == i){
            obj.options.open = null;
            obj.options.onClose(this.href, i);
        }else{
            obj.options.open = i;
            obj.options.onOpen(this.href, i);
        }   
    }       
})

The onOpen manually changes the location.

Edit: Regarding your comment... If you can modify ImageMenu.js, you could update the script which calls onClose to pass the a element object (this, rather than this.href)

obj.options.onClose(this, i);

Then update your ImageMenu instance, with the following onOpen change:

window.addEvent('domready', function(){
    var myMenu = new ImageMenu($$('#imageMenu a'), {
        openWidth: 310,
        border: 2,
        onOpen: function(e, i) {
            if (e.target === '_blank') {
                window.open(e.href);    
            } else {
                location = e.href;
            }
        }
    });
});

This would check for the target property of the element to see if it's _blank, and then call window.open, if found.

If you'd prefer not to modify ImageMenu.js, another option would be to modify your links to identify them in your onOpen handler. Say something like:

<a href="http://www.foracure.org.au/#_b=1" target="_blank" style="width: 105px;"></a>

Then, update your onOpen call to:

onOpen: function(e, i) {
    if (e.indexOf('_b=1') > -1) {
        window.open(e);   
    } else {
        location = e;
    }
}

The only downside to this is the user sees the hash on hover.

Finally, if the number of links that you plan to open in a new window are low, you could create a map and check against that. Something like:

var linksThatOpenInANewWindow = {
    'http://www.foracure.org.au': 1
};

onOpen: function(e, i) {
    if (linksThatOpenInANewWindow[e] === 1) {
        window.open(e);   
    } else {
        location = e
    }
}

The only downside is maintenance, depending on the number of links.

Others have suggested modifying the link (using # or javascript:) and adding an inline event handler (onclick) - I don't recommend that at all as it breaks links when JS is disabled/not supported.

Thanks Jack. Is it possible to edit this JavaScript to open the link in a new tab? If so, how? — Steve, Apr 04 '15 at 08:12
Hey @Steve - I edited my answer to include some work arounds. Hope they help! :) — Jack, Apr 04 '15 at 20:12

score 8 · Answer 3 · answered Jan 19 '20 at 03:32

8

Learn from another guy:

<a onclick="window.open(this.href,'_blank');return false;" href="http://www.foracure.org.au">Some Other Site</a>

It makes sense to me.

answered Jan 19 '20 at 03:32

TorvaldsDB

766
9
8

Thx, it works for me your solution. Feel free to thank the other guy ;) – mustapha mekhatria Dec 04 '22 at 21:27

score 6 · Answer 4 · answered Apr 04 '15 at 08:54

6

For Some reason it is not working so we can do this by another way

just remove the line and add this :-

<a onclick="window.open ('http://www.foracure.org.au', ''); return false" href="javascript:void(0);"></a>

Good luck.

answered Apr 04 '15 at 08:54

Tony

149
4

score 3 · Answer 5 · edited May 30 '21 at 12:18

3

According to this article How to fix target=”_blank” links: a security and performance issue in web pages this is due to security issue. Try adding rel=”noopener noreferrer” to your tag, or try this JavaScript:

let link = window.open(url, "_blank");
link.opener = null;

edited May 30 '21 at 12:18

Oleksii Filonenko

1,551
1
17
27

answered May 29 '21 at 19:15

Nafiou waidi

31
1
1

I tried this in my circumstance and it didnt change the link from redirecting instead of opening in a new tab. is there a way to check if this issue is causing the problem? – Sarfaraaz Nov 15 '22 at 09:30

score 2 · Answer 6 · edited May 12 '22 at 13:20

2

Same problem for me.

Fixed it by putting target="_blank" before href

<a target="_blank" href="http://www.google.com">Example</a>

edited May 12 '22 at 13:20

Skoua

3,373
3
38
51

answered May 07 '22 at 01:53

Agent 47

53
2

score 1 · Answer 7 · edited May 23 '17 at 10:30

Your syntax for the target attribute is correct, but browsers need not honor it. They may interpret it as opening the destination in a new tab rather than new window, or they may completely ignore the attribute. Browsers have settings for such issues. Moreover, opening of new windows may be prevented by browser plugins (typically designed to prevent annoying advertisements).

There’s little you can do about this as an author. You might consider opening a new window with JavaScript instead, cf. to the accepted answer to target="_blank" is not working in firefox?, but browsers may be even more reluctant to let pages open new windows that way than via target.

target="_blank" is not working in firefox?

The referenced link is not that **target="_blank"** is not working in Firefox, but that this one situation in which the OP tried to close a window using an unsupported (by Firefox) call. The link has nothing to do with this OP's question. — trash80, Dec 03 '18 at 14:01

score 1 · Answer 8 · answered Sep 01 '22 at 15:55

1

The better option is

<a href="http://www.foracure.org.au" target="frameName" style="width: 105px;"></a>

answered Sep 01 '22 at 15:55

Paul Antezana

11
1

Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – jasie Sep 07 '22 at 07:21
This is the only solution (not using javascript) that worked for me. – Tim John Mar 09 '23 at 18:20

score 0 · Answer 9 · answered Nov 15 '22 at 14:47

The site you linked uses wordpress and the Javascript library sliding door imageMenu in ImageMenu.js this bit of code adds a click event to the anchor tag

el.addEvent('click', function(e){

    if(obj.options.onOpen){
        new Event(e).stop();
        if(obj.options.open == i){
            obj.options.open = null;
            obj.options.onClose(this.href, i);
        }else{
            obj.options.open = i;
            obj.options.onOpen(this.href, i);
        }           
    }           
})

the part it stops the event probably overwrites the default behaviour of clicking the anchor tag which would be handled by the browser. I think the default reason for this is that the "sliding door" is supposed to shut when clicked instead of linking to an external site. often navigation menus contain anchor tags with hyperlinks and if the href was not set to # then it would reload the page instead of opening or closing the "sliding door" similar to a burger menu

Vishnu · Answer 10 · 2021-01-19T16:39:07.880

-3

most simple answer

<a onclick="window.open(this.href,'_blank');return false;" href="http://www.foracure.org.au">Some Other Site</a>

it will work

edited Jan 19 '21 at 16:39

answered Feb 20 '20 at 08:26

Vishnu

11
2

how could inverting the attributes make a difference? – Guillaume Jul 16 '20 at 13:52
what make it difference bro? cause I see nothing happing when we change position of their attributes – Trương Long Sep 24 '20 at 16:00

score -4 · Answer 11 · answered Aug 22 '17 at 22:09

-4

If you use React this should work:

<a href="#" onClick={()=>window.open("https://...")}</a>

answered Aug 22 '17 at 22:09

PhilipT

19
3

3

The OP was asking specifically about the the behavior of target ="_blank" setting of the link element. Introducing React (or any Javascript) is not super relevant to the question. – hraynaud Aug 23 '17 at 17:19

link with target="_blank" does not open in new tab in Chrome

11 Answers11

Linked