CODEWITHSUNDEEP
javascripthtml
Goran Lepur
Goran Lepur

Reputation: 594

javascript:void(0) and target="_blank" behaviour

First of all, I am not having a real problem. I'm asking this out of curiosity only.

I accidentally run into a strange behaviour when using javascript:void(0) and target="_blank" within the same link, like this.

<a href="javascript:void(0);" target="_blank" /> Link </a>

I found that Chrome is handling this normally and not doing anything when you click the link, while IE and Firefox open up a blank new tab.

My question is, isn't javascript:void(0) supposed to prevent any click event firing from a link, even if it targets new tab/window? And why is target="_blank" overiding it?

Also what is the best approach if I am, let's say, filling the href attribute with some backend language and I prefer target="_blank" hard coded beside the href attribute?

Upvotes: 11

Views: 12839

Answers (2)

Surya
Surya

Reputation: 47

I have solved this by using simple trick. It might be useful.

I have removed the target attribute dynamically based on the link. i.e if the link is undefined or empty or javascript:void(0), then we will remove the target attribute by using below code.

If the link is proper one, we will add the target attribute for that hyper link("second if condition" will do that, because in my page links are dynamic).

I have copied the sample html file(Test.html). if we want to remove the attribute on onload of the page, copy the script code in this file and paste it at the end of your required file.

If we want to apply this for dynamic links, we have to put this code in one function and we can call it when it is required.

This code will be applicable to all the hyper links in that page. We can limit this to particular set of links by using class or any other attributes.

Test.html
---------

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<a href="javascript:void(0);" target="_blank">Link1</a>
<a href="javascript:void(0);" target="_blank">Link2</a>
<a href="www.url1.com" target="_blank">Link3</a>
<a href="www.url2.com" target="_blank">Link4</a>

<script>
$("a").each(function() {

if(typeof(this.href) == 'undefined' || this.href == 'javascript:void(0);') {
    $(this).attr('href', 'javascript:void(0);');
    $(this).removeAttr('target');
}
if(typeof(this.href) != 'undefined' && this.href != 'javascript:void(0);') {
    var s_link = this.href;
    if (s_link.indexOf('http://') === -1 && s_link.indexOf('https://') === -1) {
        s_link = 'https://' + s_link;
    }   
    $(this).attr('href', s_link);
    $(this).attr('target', '_blank');
}

});
</script>

Upvotes: 1

Zdenek
Zdenek

Reputation: 710

<a href=# onclick="return false;">I look like a link!</a>

Always used this.

EDIT: To your question about void(0), the onclick is supposed to have a higher priority than the href attribute because it provides richer functionality and has the capability of actually preventing the href from operating - thus my return false. The href is only there for robots and old browsers if the onclick event is present.

Also, whether a regular navigation is performed with oddly-formed URLs is at the discretion of the browser. If the link starts with a hash, it should just jump to a bookmark. But when it's empty or contains other protocols, it all depends on the browser if it decides to try and visit the new document. Entering the javascript: pseudo protocol is traditionally used for bookmarklets which are expected to work with the current page, so anything javascript: that doesn't do document.write() or other destructive modification should leave the page unreloaded.

EDIT2: I'm not sure what you mean by backend language in href, but consider HTML-valid data- attributes to give your code something to work with if it doesn't belong logically in a href attribute.

Upvotes: 3

Related Questions