JavaScript Links
Phillip Harrington
Sep, 2001
When linking to a JavaScript function or pop-up, it is now common among designers to code the link like this:
<a href="#" onclick="javascript here">
I find this unseemly for two reasons:
- Non JavaScript browsers are being pointed to a useless link
- JavaScript browsers are not being used to full advantage
My Recommendation is as follows:
- Create a "non JavaScript" version of the page you're going to and link to it in the
href=""part of your link. This addresses #1 above. - When entering JavaScript statements or calling a function in your
onclick=""attribute, return false. This has the effect of JavaScript negating whatever the proper handling of the HTML element is. If it's a link, clicking it makes HTML try to go to that URL. Using "return false;" will make the browser ignore the HTML. For example:
function popup_window (url_to_get) {
var popup = window.open(url_to_get);
return false;
}
<a href="page.html"
onclick="return popup_window('page.html');"
>Click here</a>
Another thing, while I'm looking at that code sample, is give your window a kind of unique name so that pop-ups from different sites don't keep stealing each other's window. Nothing says "I copy and paste free JavaScripts!" more than naming your window popup, or pop_up or something that everyone else uses. As a rule of thumb any time I think something will conflict, I give it a prefix. My standard is 'po_' for philsown.
function popup_window (url_to_get) {
var popup = window.open(url_to_get,'po_popup');
return false;
}
<a href="page.html"
onclick="return popup_window('page.html');"
>Click here</a>
Note that I'm referring to the window name here, not the variable name, which, living in the scope of your page won't conflict with anything else, unless you happen to copy and paste two different scripts from different places each with the name 'popup' in them. I've seen it happen and it's not pretty.
Finally, and for God sake already, please make sure that the very last thing your pop-up function does is focus the new window! This is especially important if you're re-using a pop-up function for multiple links on a page.
Say for example Harvey Href has this online photo gallery featuring thumbnails that each launch a pop-up with the full size image when clicked. The user will click the first thumbnail, and the new pop-up window will open. Then they'll leave the pop-up window open, and switch back to the thumbnails page. When they click their second thumbnail expecting the full size version in the pop-up they're confused when it doesn't appear. Why?
The answer is that the second link worked fine, but like all good little JavaScript coders, Harvey named his window, making it an object that the thumbnail window can refer to time and time again. So when the user clicked the second thumbnail, the open window function attempted to open a window that, according to it's name, was already open (attempted to create an object that already existed in the current scope), so JavaScript simply used the existing window to go to the specified href. Why is the user confused? The window got focus by default on the first click because it was being created. It existed at the time of the second click so focus was not automatically given.
This won't happen on your web page because you'll explicitly focus your new window, right? Promise? Example:
function popup_window (url_to_get) {
var po_popup = window.open(url_to_get,'po_popup');
po_popup.focus();
return false;
}
<a href="photo1" onclick="return popup_window('photo1');"><img src="/img/js-phil1sm.jpg" width="112" height="75" alt="" border="0" /></a>
<a href="photo2" onclick="return popup_window('photo2');"><img src="/img/js-phil2sm.jpg" width="112" height="75" alt="" border="0" /></a>
The above becomes something beautiful:
I hope this helps someone somewhere.
