Using jQuery to over come the shortsomings of XHTML
Who would have ever have know that you couldn’t do a target=”blank” on an anchor tag with XHTML Strict? I didn’t and this caught me by surprise. I haven’t a clue why the w3c even thought to do this. I think that the target attribute is probably the most useful attribute in the HTML language.
Anywho, this really isn’t a problem since I use jQuery! By using the power of jQuery you can overcome this problem. What I did was follow the advice of this post and use the “rel” attribute with a value of “external”. Then using jQuery I’m able to search the DOM for an anchor tags that are marked and open a new window. The code is below:
<a href=”http://www.jquery.com” rel=”external”/>
$(function(){
// fix for target=”_blank”
$(“a[@rel~='external']“).click(function(){
window.open($(this).attr(“href”));
return false;
});
});
What this does is look for an anchor tag (A) that has a value of “external” in it’s “rel” attribute. If it finds it, it grab the value of the links “href” attribute and opens a new window to the address. Now grant it, you could do this with plain vanilla JavaScript, but jQuery makes it so much more readable.
Hi Tony,
Nice, jquery is so powerful!
I guess w3c doesn’t think developers should be dictating to the user how a window is opened (i.e. a new window).
One thing with your solution, is this not considered a popup window and therefore will have issues with all the popup blockers out there?
Michael
@mike,
That is the only problem I see with this, however there isn’t any other solution that I know of. If someone has a better idea out there, I would like for them to share it.
Nice tip. I just starting using jQuery. Thanks for fueling the fire
Just wait about 20 minutes for my next post then
To make it even more compact – I would deploy like so:
$(document).ready(function() {
$(“a[@rel='external']“).click(function() {
return !window.open($(this).attr(“href”));
});
})
still returns true or false
@fazal
Actually you want it to always return false and never true, so that clicking on the link itself doesn’t open the link in the current window, but a new one.
rip747,
my bad – i meant to say it still returns false – if you observe my code – just before it says window.open – I have inserted an exclamation mark “!” which returns false.
just ran into this from google and wanted to say thanks for the tip!
Not sure why I had problems with your guys scripts when I copied and pasted them into my js file. Firebug reported an illegal character. I rewrote it and changed it a bit and now it works for me.
$(“a[rel='external']“).click(function() {
window.open(
$(this).attr(“href”)
);
return false;
});
This is very similar to how I had it before but I was using a special class that I included like this:
$(“.specialLink”).click(function() {
window.open(
$(this).attr(“href”)
);
return false;
});
But your solution with using the advanced selector is much cooler!!
Thanks.
and why not just take the target=_blank itself out of the markup and into jQuery?
It validates all the same, no popup-blocker problems, and as long as browsers still support it…
$(‘a[rel="external"]‘).click(function () {
$(this).attr({‘target’:'_blank’});
});
same can be done for things like history.back, etc