CODEWITHSUNDEEP
htmlhyperlink
Steve
Steve

Reputation: 1765

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

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.

Upvotes: 55

Views: 205878

Answers (14)

Olatuneday
Olatuneday

Reputation: 29

Using an anchor tag will always refresh your current page, but if u want to only open the link in a new tab and not refresh your current page, u can consider using another tag but not anchor tag. In my case I put an image tag inside my anchor tag, so I just remove the anchor tag around the img tag and put the onclick event as thus: u can put rel="noopener noreferrer" attr but I'm not sure if it has any effect.

Upvotes: -2

Timur Gafforov
Timur Gafforov

Reputation: 761

This has been created by the same smart people who invented the "allow cookies" thingy. Simply doing "window.open()" with "preventDefault()" doesn't work anymore - the URL opens a new tab and still redirects the current tab. So, I have come up with a solution where you just make the current tab open do somethink like a reload. Not an elegant solution, but it works:

HTML:

<a href="/someurl" target="_blank">Some text</a>

JQuery

$('a[target="_blank"]').click(function(e){
        
    e.preventDefault();
    window.open(this.href,'_blank');
    location.href = location.href;
    return false;
        
});

You could do location.reload(); instead of location.href = location.href;, it's just that in my particular case reload adds additional load.

Upvotes: 0

Alfonse
Alfonse

Reputation: 55

If you code a link like this:

<a href="https://www.example.com/" target="_WORD" rel="noreferrer">

It will open in a new browser tab.

You can use pretty much any word prefaced with an underscore character. Just don't use "_blank"

Problem 100% solved!

Upvotes: 0

Sarfaraaz
Sarfaraaz

Reputation: 488

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

Upvotes: 0

Paul Antezana
Paul Antezana

Reputation: 11

The better option is

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

Upvotes: 1

Agent 47
Agent 47

Reputation: 63

Same problem for me.

Fixed it by putting target="_blank" before href

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

Upvotes: 3

Nafiou waidi
Nafiou waidi

Reputation: 31

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;

Upvotes: 3

Jack
Jack

Reputation: 9388

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.

Upvotes: 25

Vishnu
Vishnu

Reputation: 11

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

Upvotes: -3

TorvaldsDB
TorvaldsDB

Reputation: 982

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.

Upvotes: 10

PhilipT
PhilipT

Reputation: 19

If you use React this should work:

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

Upvotes: -4

Tony
Tony

Reputation: 149

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.

Upvotes: 6

Anurag
Anurag

Reputation: 497

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

Upvotes: 37

bhavesh vala
bhavesh vala

Reputation: 873

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?

Upvotes: 1

Related Questions