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?

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

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.

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.

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.

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).