As I surf the Web, I come across countless Web sites that use one of the following methods to invoke a javascript function when someone clicks a link:
<a href="javascript:somefunction()">Click to invoke somefunction</a>
or
<a href="#" onclick="somefunction()">Click to invoke somefunction</a>
Unfortunately, these types of links are completely unusable for anyone with javascript disabled (and, for that matter, the second example is completely useless to people that can’t “click” the links, such as people using older handheld devices). Even worse, the second example can be extremely annoying, as it focuses the screen back to the top of the Web page when you click it.
So what’s the solution? It can be very simple, but you need to make sure that the target of the link is usable for people without javascript. In other words, if you’re using the javascript function to do something like submit a form, open a new window, process an AJAX request, etc., creating a usable link is extremely simple. However, if you’re using the javascript function to just add a new element to the page or something like that, you’ll need to do a little extra work on the backend to make sure you can make the same thing happen by loading the page again without javascript.
To begin with, you set up the link the same way you would create any other link. Then, you use the onclick (or onchange or whatever event handler you choose) to invoke the javascript function. That way, if someone clicks on the link with javascript disabled, it will still work. However, if they have javascript enabled, the javascript function will be invoked instead.
The important part is that the javascript function needs to return false, and you need to include a “return” statement in your onclick event. An example link might look something like:
<a href="http://www.example.com/" onclick="return somefunction()">Click to invoke somefunction</a>
Any execution will stop after the javascript function returns false (which means that the standard href portion of the link will never fire). However, if javascript is disabled, the link will function normally.
Here is a real-life example, using a javascript function to open a new window with some custom elements.
<script type="text/javascript" language="javascript">
function openWindow(where,winName) {
window.open(where,winName,'status=0,toolbar=0,location=0,menubar=0,directories=0,resizable=1,scrollbars=1,height=450,width=550');
return false;
}
</script>
<a href="http://www.yahoo.com/" target="yahoo-window" onclick="return openWindow(this.href,this.target)">Open Yahoo! in a new window</a>
If javascript is enabled, clicking that link will open a new window that is 450 pixels high by 550 pixels wide, is resizable, does have scrollbars and does not have the status, toolbars, directories or location enabled. However, if javascript is disabled, the link will simply open Yahoo! in a new window. If you’d like more information about the javascript window.open() function, you can check out the information page on javascript-coder.com.
Post Your Comment