Accessible, Unobtrusive New Windows with jQuery

I loves me some jQuery – without it I probably wouldn’t write any JavaScript at all (seriously, I hate the stuff). Anyway, today I needed to add some “open in new window” links to an internal application using jQuery. Being the Standardista I am, I wanted to make it a)Accessible, and b) Unobtrusive . If the user has JavaScript disabled (it happens, even on “controlled”, intranet environments), the link should just go to the new page anyway — new window be damned.

My first attempt (below) didn’t work as expected. The following code takes all <a> tags with a class of “newwindow” and applies an onclick event to open a new window.

[sourcecode language=”javascript”]
$(function(){
$(‘a.newwindow’).click(function(){
var w = window.open($(this).href(), ‘newWindow’, ”);
return false;
});
});
[/sourcecode]

Nothing would happen with the above, because of the return false;. Removing return false; would open a new window, but also send the opening window to the new page. In the end, the following worked the way I wanted:

[sourcecode language=”javascript”]
$(function(){
$(‘a.newwindow’).click(function(){
var w = newWindow($(this).href(), ‘newWindow’, ”);
return false;
});
});
function newWindow(url, wName, opts){
w = window.open(url, wName, opts);
return true;
}
[/sourcecode]

Basically the “heavy lifting” was moved to a seperate function. It’s slightly longer to type, but not exactly finger-breaking stuff. No doubt some bright-spark could tell me an even betterway (feel free!), but this’ll do for now.

Leave a Reply

Your email address will not be published. Required fields are marked *

%d bloggers like this: