Mark external links and open in new window/tab (jQuery)
Specs:
- filter external links (check the hostname)
- filter links marked as
rel="external" - filter links in image maps (
area) as well - text links only (do not contain
img,divormailto): add CSS class.externalproviding an additional icon - open external links in new window/tab
The code (jQuery):
$(document).ready(function(){
$('a, area').filter(function() {
return this.hostname && (this.hostname).split(":")[0]
!== (location.hostname).split(":")[0]
|| $(this).attr('rel') == 'external';
})
.not(':has(img, div, mailto)')
.addClass('external')
.end()
.click(function(e) {
open(this.href);
e.preventDefault();
});
});
Notes:
- Why not mark external links containing
images,divormailtowith CSS class.external? This is because we want to add the icon to pure text links only. Links containing images or whatever kind of block elements may disturb the site layout if an additional icon would be added. - Use
rel="external"to force opening a link in a new window/tab.
CSS providing an icon for external links marked with class .external:
a.external {
background-image: url(icon_external.png);
background-position: right top;
background-repeat: no-repeat;
padding-right: 11px;
zoom: 1; /* IE */
}
(Inspired by Karl Swedberg at learningjquery.com.)