docwhat's avatardocwhat's blog

Making JavaScript transparent

A disclaimer: I’m writing this just to share (and record for myself) this one stupid trick in JavaScript. While I’m here, I thought I should kvetch about most JavaScript usage.

First, the stupid trick.

Have you ever been on a page and you try to control-click or right-click on a link only to discover that the link is something stupid? Such as:

javascript:window.open(‘http://someurl/’);
The underlying HTML for this looks like so:
You should click on this:
<a href="javascript: window.open(’http://someurl/’); ">link</a>

What this is is a popup link. When you click on it and it’ll pop up a new window. It isn’t a real URL. It can’t be opened in a new tab. It cannot be bookmarked. It cannot be saved. It doesn’t work if JavaScript is disabled or has a bug in it.

The solution is one of these things that should be obvious once it’s explained. Instead of making the href useless by filling it with the javascript: junk, you use a real URL. And then use the onclick attribute to fetch the href and open it in a new window.

Example:

You should click on this:
<a href="http://someurl/"
      onclick="try{window.open(this.href,’_blank’);
               event.returnValue = false;
               return false;}
               catch(e){event.returnValue = true; return true;}">link</a>

This will work even with JavaScript disabled. It’ll work even if I made a mistake in the JavaScript. The event.returnValue = boolean and return boolean parts are important. If you return false then the browser will assume that the onclick event isn’t handled and won’t continue. If you return true or don’t use return, then the browser assumes that you didn’t handle the onclick event and then do the normal thing (open the link). And IE 7 needs the event.returnValue and won’t hurt any other browser.

Now, onto the kvetch.

Notice that this isn’t much harder. Notice how this is easier to validate. Notice how it delivers to the user the expected behavior.

Why isn’t this done more often. I hate it when I visit some site, hover over the link to see the URL and get JavaScript junk instead.

This requires more work when you have a complicated URL to generate, but with the ability to change the DOM tree directly there is no excuse.

Keeping everything working the way your user expects it to work is an important principle in user interface design and engineering. Ignore it at your peril.

UPDATED 2006-1-12

Okay, for those keeping score, IE 7 continues the tradition of sucking.

I can add another bug to IE 7’s growing list. I tried to make a simple test case. But when I make it simple it starts working correctly. Bah. I don’t have enough patience or desire to do this much work — for free — for a company with as many employees and dollars as Microsoft — for a browser I don’t own and only use to find and fix bugs like this.

Basically, under certain circumstances, onclick’s return value is ignored. In this case, we had an A tag that used the trick mentioned above. So that meant the popup url would appear in both the parent window and the popup window.

The work around? Set event.returnValue right before returning. Bleh. The code has been updated.

EDITED — Related links:

Comments

Gravatar for jim
Jim

Ran accross this and your onclick trick solves a couple of my problems, in a different way. It allows me to open the link using the default behavior (a new tab, if set up that way) as opposed to opening with window.open(), which always gives a new window. For some reason… At the same time I can run additional javascript that needs to be done when the link is clicked, and I have the option of continuing on to open the link or not.

Gravatar for docwhat
docwhat

Thanks for the feedback. I’m glad that it was useful. :-)

re: window.open() Where that window opens is usually under the control of the user via options. In firefox, window.open() will go in a new window or tab, as per the configuration. In IE, I’m not sure.

Ciao!

Submit a Comment

docwhat

The personal blog of Christian Höltje.
docwhat docwhat contact