The useless javascript: pseudo-protocol

By crisp on Tuesday 05 December 2006 22:57 - Comments (2)
Category: Javascript, Views: 15.902

Or should the title read 'javascript: pseudo-protocol considered harmful'?

What's up with this handy feature you might ask, well a lot actually. It comes down to this: when you use this in for instance an href-attribute you are most probably misusing an anchor-element for something that is not related to navigation. "You should not use a link for anything else but a link" - it's the basis of the web: links are for navigation and not for in-page behavior*. Got that?
* exception being the use of fragment identifiers

If you are using an anchor because you need something to just look like a link you should start reading up on CSS which lets you do underlining, changing the appearance of the mousecursor and add hover-styles to any element, so that argument is void.

Now for some more reasons: at first it's obtrusive and inaccessible. If you really want to do some nifty things with links use an onclick handler and use the href to link to an alternative page for non-JS capable clients like this:

HTML:
1
<a href="alternative.html" onclick="myNiftyThing();return false">Click</a>


Note the 'return false': this prevents a JS-capable client to actually start navigating to 'alternative.html'. That brings us to another problem with the javascript: pseudo-protocol, namely the fact that IE (at least up to version 6) enters a different 'state' when the href of a link is being followed no matter if it contains an actual link or a javascript function. This is most noticable when you have animated gifs on your page: when such a link is clicked they stop animating, and there are probably more problems that can arise from this 'state'-change in Internet Explorer. Wrapping your function-call in the void() operator doesn't change that either.

Now for some examples the javascript: pseudo-protocol was really meant for:

HTML:
1
2
3
4
5
6
7
<script type="text/javascript">
function newPage()
{
    return '<h1>Header<\/h1><p>content<\/p>';
}
</script>
<a href="javascript:newPage()">Click</a>

Yeah, pretty useless...


HTML:
1
2
3
4
5
6
<img width=100 height=100
    src="javascript:'GIF89a\x03\x00\x03\x00\xb3\x00\x00\x00\x00\xff\x00'+
    '\xff\x00\xff\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00'+
    '\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00'+
    '\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00,\x00\x00\x00\x00\x03\x00\x03'+
    '\x00\x00\x04\x05P\x04\x09\xe6\x8c\x00;'
">

Kinda cool but sadly only works in Firefox. The data: pseudo-protocol is better supported (but still not by IE though).

javascript: in event handlers

This is basically a different subject because the (mal)practice of putting 'javascript:' in an event handler actually has nothing to do with (pseudo-)protocols. In fact when you know something about javascript you might recognize it as the syntax for a label statement and you would be right because that is exactly how it is treated by most browsers:

HTML:
1
2
3
<div onclick="javascript:while(1){alert('loop');break javascript;};alert('done')">
    click
</div>


IE ofcourse being the exception; there the 'javascript:' prefix is actually used as a scripting language identifier, so above mentioned example would yield a 'label not found' error (you would need to use 'javascript:javascript:' for it to work but that will result in a 'duplicate label' error in all other browsers).

Although the idea of having some sort of mechanism to specify the scripting language for event handlers is nice Microsoft had better first spent some time implementing Content-Script-Type. Not that anyone ever bothered with that although the HTML specification clearly states that documents using intrinsic event scripts without specifying Content-Script-Type are incorrect :P

Volgende: String performance in Internet Explorer 12-'06 String performance in Internet Explorer
Volgende: .toJSONString() and Object.prototype 12-'06 .toJSONString() and Object.prototype

Comments


By bob, Thursday 15 May 2008 19:07

I don't know if the author still maintains this "blog", but here goes anyway;
leave javascript: alone, what did he ever do to you??!?!!? -- okay, i will be serious now, how would you prefer bookmarklets to happen then, huh, answer that punk, will ya??

<img width=100 height=100 src="javascript:'GIF89a\x03\x00\x03\x00\xb3\x00\x00\x00\x00\xff\x00\xff\x00\xff\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x03\x00\x03\x00\x00\x04\x05P\x04\x09\xe6\x8c\x00;'">

By Tweakers user crisp, Monday 02 June 2008 01:39

bob: don't we have the data: protocol for that? (also supported in IE8 btw)

and as for bookmarklets it still isn't a good idea to present those in a link with the javascript: pseudo-protocol...

Comments are closed