When do I need to specify the JavaScript protocol?

Question

I was under the impression that I only need to specify the "protocol" when using JavaScript in URL attributes, such as in hrefs. Is this the only "useful" context for javascript:?

Sensible:

<a href="javascript:alert('Hello')">World!</a>

Silly:

<form onsubmit="javascript:alert('oops!')">

Is this right? Or is there some obscure bug/use case I need to be aware of?

Lengthwise

reverse dupe line – Interest

Answer 1

The javascript: pseudo-protocol on event handlers will be only ignored, you don't need it, the JavaScript engine will interpret javascript: as a Label Statement.

A label simply provides an identifier to a statement, and lets you refer to it elsewhere in your program.

IMHO, this pseudo-protocol is only useful for bookmarklets...

Recommended article:

• The useless javascript: pseudo-protocol

Ariew

Answer 2

As other answers have mentioned, avoid the use of javascript: href links, and it is entirely unnecessary in event handler attributes. However, since A tags are sometimes still semantically correct, you will need to put something in the href attribute if you want your :link and :hover CSS styles to be applied to the element in Internet Explorer. In this case, use:

<a href="#" onclick="doSomething(); return false;">Link</a>

Or

<a href="javascript://" onclick="doSomething();">Link</a>

There is one (somewhat obscure) bug with the javascript protocol - in Internet Explorer*, it will think you are leaving the page when you click the link. If you are using window.onbeforeunload, then your navigate-away message will appear at this time. For this reason alone, we've stopped using the javascript protocol completely so we don't have this bug show up because we forgot to check for it when we add a navigate-away message to some page.

---

* I probably should have specified the version when I first wrote this. I don't remember at all, but just in case the bug is present only in a now-mostly-defunct browser like IE 6 or 7, you are probably best to test it yourself.

Hyperextension

Answer 3

Don't specify it at all, ever. It's wrong to do it in <a> tags, which instead should be coded like this:

<a href='#' onclick='alert("Hello")'>World</a>

It's a remnant from days gone by. The only time I can think of where it's used would be in the browser address bar (and bookmarklet bookmarks). Keep it out of your pages.

Heall

Remember to return false; if you use # so that it cancels the href action and doesn't go to the top of the page or (worse) change your hash if you had one that you were actually using for something. Alternatively you can use javascript:// as the href which will truly do nothing. – Hyperextension

+1 @Renesis. Also, you can even add a simple description in the href with that method.. for example: javascript:// Open in new window. It's a JS comment so you can put anything in there. This is helpful because it will display in the status bar when the user hovers over the link – Scrimpy

@Renesis: didn't know about the href="javascript://" cool! BTW does it suffice in your 1st example to return false in order to prevent the default event? I mean shouldn't we call preventDefault ofn FF ann window.event.returnValue = false on IE? Thanks! – Sear

@Marco Demaio, AFAIK you only need preventDefault to prevent the default if you don't have access to return false to the handler itself. This would be the case with jQuery or any library where you add event handlers any other way than to the event handler attribute on the tag. Ex: <a onclick="doSomething();">Test</a> and function doSomething() { return false; } would NOT prevent the default. – Hyperextension

The "javascript:" is not a good idea, ever. Why code in an <a> tag at all if it's going to have a broken "href" value? – Heall

@Heall - Why is it broken? Buggy? Depends on your use. Distasteful to some developers? Yes. But broken? I have yet to see any evidence of this. – Hyperextension

Answer 4

In practice, you are correct.

You need to do this in any instance where something other than script is expected. In theory, you can stick javascript:whatever anywhere you can use a URL, but this was never supported and now is officially recommended against use.

However, you really shouldn't use javascript: at all. For links, you can use the onclick attribute. What is actually happening nowadays is the JavaScript engine is identifying javascript: as a label, which is why the code executes.

Cassidycassie

html.spec.whatwg.org/multipage/… it is now part of the HTML standard – Becerra

Answer 5

You should all check out http://bytes.com/topic/javascript/answers/504856-javascript-pseudo-protocol-event-handlers Especially the post by "Lasse Reichstein Nielsen",because most answers are here are incorrect in some fashion.

Also remember that the anchor tag does not require a href at all! That is <a>hi</a> is valid xhtml. The problem using href="#" is that it may scroll to the top of the page.. it is simply not needed. Lastly if you do not actually want the behavior of the anchor tag you should not use it. You can simulate an anchor using css (cursor:pointer) and events like mouseenter and mouseleave (which is more work, but does not "break" the expected behavior of an anchor tag).

Ulrica

"Simply not needed" is not true for all browsers. Without href, in some versions of IE the correct CSS styles will not be applied and the anchor tag will not be differentiated from the text, nor will it be able to utilize :hover. – Hyperextension