Hello World

Many many sites use JavaScript to display full-size images in new windows, to display drop-down menus and sub-menus when clicking a link.

These are actually quite useful in my opinion, provided they are coded properly. Most pages with these aren't. If you try opening a full-size image to a new window for example, you usually end up with a blank page with an URL similar to "javascript:someFunctionName". Also, if you don't have JavaScript enabled, they won't work at all.


But it is possible to write these without breaking these functions.

Let's look at a typical image display script. They usually have a function such as this one:

function openWindow(url)
{
 window.open(url);
}

and when using the above function...

<a href="javascript:openWindow('myimage.jpg')">My image</a>

As you can see, the openWindow function is set as the href attribute of the link. This has two problems: if JS is disabled, the link won't work at all and if you want to copy the link, open it in a new tab or something, it won't work either.


Let's see how it should be done:

function openWindow(url)
{
 window.open(url);
 return false;
}

<a href="myimage.jpg" onclick="return openWindow('myimage.jpg')">My image</a>

We changed the openWindow function to return false after opening the window and instead of using the javascript function in the href, we link directly to the image and use the onclick attribute with the function call.

This allows a browser without JS or JS disabled to follow the link, as the href is pointing to the image like it should.

If we return false in the onclick handler, it will stop the browser from following the link. That's why we have our openWindow function return false after opening the window - to stop the browser from going to the URL because we already opened it in a new window.

Conclusion

By using this method you can use JavaScript in links and other stuff without breaking functionality on special cases. Yes, it probably seems like extra work, but it's not that much and it's worth the extra few characters you need to type.

You can use this method in forms too: If you want to submit a form with AJAX for example, you can use the onsubmit-event. It works the same way as the onclick event for a link: return false and the browser will not submit the form.