Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

href="javascript:" vs. href="javascript:void(0)"

Tags:

javascript

Our web app is rendered totally on the browser.
The server only talks to the browser through JSON messaging.

As a result, we only need a single page for the app and mostly all the <a> tags do not have a real href pointing to other pages.

In my quest of removing unnecessary things I was wondering if I can get rid of the zillions of void(0) we have in our code, as they seem useless:

<a onclick="fn()">Does not appear as a link, because there's no href</a> <a href="javascript:void(0)" onclick="fn()">fn is called</a> <a href="javascript:" onclick="fn()">fn is called too!</a> 

Does anybody knows if using href="javascript:" can cause a problem?
It works even on IE7...

Please don't spend your valuable time to tell me inline javascript is bad, as this is generated by a template engine :)

like image 643
Mic Avatar asked Sep 08 '10 10:09

Mic


People also ask

Which href value should I use for JavaScript links or JavaScript void 0?

Fast-forward to 2013: javascript:void(0) violates Content Security Policy on CSP-enabled HTTPS pages. One option would be then to use href='#' and event.

What is JavaScript void 0 in href?

JavaScript void 0 means returning undefined (void) as a primitive value. You might come across the term “JavaScript:void(0)” while going through HTML documents. It is used to prevent any side effects caused while inserting an expression in a web page.

Should I use JavaScript void?

Generally, you want to avoid href="javascript:void(0)" , as it will cause the browser to parse the value of the link URL, which is both costly and unnecessary. It also introduces a potential XSS security vulnerability, as javascript: URLs violate Content Security Policy (CSP).


1 Answers

It does not cause problems but it's a trick to do the same as PreventDefault

when you're way down in the page and an anchor as:

<a href="#" onclick="fn()">click here</a> 

you will jump to the top and the URL will have the anchor # as well, to avoid this we simply return false; or use javascript:void(0);

regarding your examples

<a onclick="fn()">Does not appear as a link, because there's no href</a> 

just do a {text-decoration:underline;} and you will have "link a-like"

<a href="javascript:void(0)" onclick="fn()">fn is called</a> <a href="javascript:" onclick="fn()">fn is called too!</a> 

it's ok, but in your function at the end, just return false; to prevent the default behavior, you don't need to do anything more.

like image 165
balexandre Avatar answered Sep 22 '22 19:09

balexandre