Articles :: JavaScript :: javascript: protocol
written by Toby Miller on November 2, 2005 November 2, 2005
I was browsing through the javascript threads on google groups the other day and caught a thread on the usage of the "javascript:" protocol. I was a little shocked to see how many people were in agreement that the "javascript:" protocol was inherently bad and nobody should use it. Hehehe, well this was a little hard for me to bite down on so I started sifting through the docs. There are some good sources out there, but they're being shadowed by a strange misconception that the "javascript:" protocol should just never be used. Well, I'll admit that under some circumstances it's unnecessary, but that's a far cry from saying that it should never be used.
So I put together some actual examples to show you what you should and shouldn't do when creating javascript links.
GOOD Examples
snippet:
<a href="http://www.google.com/">link</a>
This is the most standard way to link to another URL.
snippet:
<a href="alert('action');">link</a>
This is the proper way to trigger a javascript action by clicking on an element.
snippet:
<a href="http://www.google.com/" onclick="alert('action');return(false);">link</a>
This is the proper way to trigger a javascript action by clicking on an element while simultaneosly providing an alternate URL for non-javascript users via the href attribute. By returning false all javascript enabled browsers will ignore the href value. Providing the URL in the href attribute also enables your visitors to:
- see the URL in the status area when hovered over the link (instead of the javascript).
- right-click and copy the link to paste elsewhere (instead of the javascript).
- middle-click (ctrl-click or ctrl-enter) and load the URL in another tab or new window (instead of performing the javascript action(s)).
snippet:
<a href="http://www.google.com/" onclick="alert('action');return(true);">link</a>
This is the proper way to trigger a javascript action by clicking on an element while simultaneosly providing an alternate URL for non-javascript users via the href attribute. By returning true all javascript enabled browsers will load the URL in the href attribute when the javascript has finished executing. Providing the URL in the href attribute also enables your visitors to:
- see the URL in the status area when hovered over the link (instead of the javascript).
- right-click and copy the link to paste elsewhere (instead of the javascript).
- middle-click (ctrl-click or ctrl-enter) and load the URL in another tab or new window (instead of performing the javascript action(s)).
OK Examples
snippet:
<a href="#">link</a>
Using the "#" symbol is generally frowned upon as a common practice because it adds no value to the experience. It's not a link to a different page, it doesn't provide any sort of direction as to the purpose of the link, etc. However, if your intention is to provide "back to top" buttons on a page then this is a perfect alternative to actually creating a "top" reference inside your html. This is a built-in "back to top" button.
snippet:
<a href="alert('action');">link</a>
This is the most widely supported (and correct) way to create a clickable element that results in a javascript action.
snippet:
<a href="alert('action');return(false);">link</a>
or
<a href="alert('action');return(true);">link</a>
Returning a boolean value from the onclick event is used to determine whether to allow or deny the href attribute to be loaded as a URL. Since these links are using href attributes without onclick attributes the return values are completely unnecessary. However, they cause no errors or problems either so I've marked them as "OK" instead of "BAD".
snippet:
<a href="javascript:void(alert('action'));">link</a>
Whenever attempting to use javascript inside the href attribute (instead of the onclick attribute) you cannot have a return value. Any return value, even if it is "undefined" will cause the javascript interpreter to throw an "invalid return" error. If you still have to put your javascript inside the href attribute (for some unavoidable reason) instead of using the onclick attribute you must use the "void()" function to cancel out any return values that may result from your code. Note that this also doesn't only apply to the last statement in your onclick attribute. If you have multiple actions you must void out each one because "ANY" return value will result in an error.
BAD Examples
snippet:
<a href="#" onclick="alert('action');return(false);">link</a>
Unless it is your intention to purposely send your visitors "back to top" as a penalty for having javascript disabled then this is a bad link. Try removing the href attribute altogether or providing a useful link instead.
snippet:
<a href="#" onclick="alert('action');return(true);">link</a>
or
<a href="#" onclick="alert('action');">link</a>
Unless it is your intention to purposely send your visitors "back to top" immediately after the code in your online event is finished executing or as a penalty for having javascript disabled then this is a bad link. Try removing the href attribute altogether or providing a useful link instead (and possibly switching your return value to false). Note also that returning nothing when the href attribute exists is equivalent to returning true.
snippet:
<a href="javascript:alert('action');return(false);">link</a>
or
<a href="javascript:alert('action');return(true);">link</a>
Whenever attempting to use javascript inside the href attribute (instead of the onclick attribute) you cannot have a return value. Any return value, even if it is "undefined" will cause the javascript interpreter to throw an "invalid return" error. If you still have to put your javascript inside the href attribute (for some unavoidable reason) instead of using the onclick attribute you must void out the return values with the "void()" function.
snippet:
<a href="alert('action');return(false);">link</a>
or
<a href="alert('action');return(true);">link</a> or <a href="alert('action');">link</a>
You cannot run javascript code inside the href attribute (instead of the onclick attribute) without the "javascript:" protocol. Instead of interpreting the javascript code your browser attempts to load your code as a URL.
snippet:
<a href="http://www.google.com/" onclick="alert('action');">link</a>
Without providing a boolean return value in the onclick attribute you're telling the browser to run the code in the onclick attribute then as soon as that's finished load the URL in the href attribute. While this is technically correct if this is your intention it's good to "return(true);" so that other developers can see this intention as well.
If you know of more examples that you think should be covered here let me know.
permalink
|
