solidhex.com

A tried and true use of JavaScript is to open external links in a new window (or tab, depending on your preferences). I’ve come across countless scripts written to do this task, and even though some are using jQuery or Prototype, they are not making the most out of the library or framework they are using.

Basically, there are three ways to open an external link in a new window:

1. Give the a tag a class of ‘popup’, or something to that effect, iterate through the links and open those with class of ‘popup’ in a new window.
2. Set the rel attribute to external, and again, iterate through the links in the document, find the ones that contain this attribute and value pair and open the links in a new window.
3. Iterate through all the links in the document, check to see if the href contains the current site’s URL and if it doesn’t, pop it open in a new window.

For this example, I am going to assume my links are marked up like so:

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

With jQuery, there’s no need to iterate through each link and test for the rel attribute, and it exists, test for the value external. You can simply use CSS selectors to grab only the links you need without having to loop over them, then simply apply the Click Event Helper directly to those links like so:

$(function(){
	$('a[rel=external]').click(function(e){
		open(this.href);
		e.preventDefault();
	});
});

That’s what I like about jQuery - you get in, get what you need and get out.

Tags: JavaScript, jQuery, tips

This entry was posted on Friday, May 23rd, 2008 at 12:03 am and is filed under Development, JavaScript. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.