Rip's Domain

Using jQuery to over come the shortsomings of XHTML

Posted in Jquery by rip747 on February 9, 2007

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&#8221; 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.

11 Responses

Subscribe to comments with RSS.

  1. Michael Sharman said, on February 10, 2007 at 10:13 pm

    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

  2. rip747 said, on February 10, 2007 at 11:45 pm

    @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.

  3. Ben Nadel said, on February 11, 2007 at 11:39 am

    Nice tip. I just starting using jQuery. Thanks for fueling the fire🙂

  4. rip747 said, on February 11, 2007 at 11:46 am

    Just wait about 20 minutes for my next post then😉

  5. Fazal said, on February 12, 2007 at 10:22 am

    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🙂

  6. rip747 said, on February 13, 2007 at 10:42 am

    @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.

  7. Fazal said, on February 14, 2007 at 9:57 am

    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.

  8. rip747 said, on February 15, 2007 at 10:03 am

    🙂

  9. James Carlos said, on September 19, 2007 at 6:52 pm

    just ran into this from google and wanted to say thanks for the tip!

  10. Alex Grande said, on March 12, 2008 at 8:42 pm

    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.

  11. Molurus said, on April 25, 2008 at 4:01 am

    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


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: