Target blank with jquery or prototype

2009 March 2

In order for your site to be strict XHTML compliant there can’t be any target attributes for links, it isn’t a supported attribute. I can see why this is a good idea but it’s also annoying at the same time. It doesn’t make sense for when you are linking to an external vendor or site for someone to open in a lightbox or within your own site.

There are two ways around this, say f standards and put the target attribute in there anyways or make javascript do it for you.

With the methods below specify rel=”external” on any links you would like to open in a new window or behave like a target=”_blank”.

<a rel="external" href="http://google.com">Google Rocks.</a>

jQuery

$(function(){
  $('a[@rel$='external']').click(function(){
    this.target = "_blank";
  });
});

Prototype

Event.observe(window, 'load', function() {
    $$('a[rel="external"]').each(function(link){
        if(link.readAttribute('href') != '' && link.readAttribute('href') != '#'){
            link.writeAttribute('target','_blank');
        }
    });
});
No comments yet

Leave a Reply

Note: You can use basic XHTML in your comments. Your email address will never be published.

Subscribe to this comment feed via RSS