Opening links in a new window with jQuery

With the advent of XHTML Strict 1, you can no longer use target=”_blank” on an A tag in your code. The only solution for this is to use Javascript to action a new window / tab to be opened.

The traditional way would be something this:

// externalLinks()
/*
* Allows external links to be opened in a new window without the use of target attribute
* @return bool
*/
function externalLinks() {
//SETS DOMAIN OF SITE
var domainName=document.domain;

var externalLinks=document.getElementsByTagName("a"); //FIND ALL LINKS ON THE CURRENT PAGE
	
for(var i=0; i-1 && contains_domain==-1) { //DOES CONTAIN AN 'http' OR DOES NOT CONTAIN domainName
			setElementAttribute(externalLinks[i], 'target', '_blank');	
		}
	}
		
	if(elementClass.indexOf('new_window') > -1 ) { //FORCE LINK TO OPEN IN NEW WINDOW
		setElementAttribute(externalLinks[i], 'target', '_blank');
	}		
}
}

This was written by Mike van Rooyen at 9xb.

A much simpler way of doing this comes with jQuery, and can be reduced down to one line.

$("a[href^=http://]").attr("target", "_blank");

Mike’s solution also makes sure that it doesn’t apply this to links to your own site, which is useful for sites running frameworks like WordPress – where links are embedded absolutely.

Therefore, something like this might be a little more suited.

$("a[href^=http://]").each(function(){
	if(!$(this).attr('href').indexOf(document.domain)){
		$(this).attr("target", "_blank");
	}
});

Image Credit: paloetic