jQuery snippet to force external links into a new window
Usability concerns aside, one thing that is often requested by clients is to force all outbound links from their website into a new window. Here's a little jQuery script I use that achieves just that:
( function ($) { $(document).ready( function () { var hostname = window.location.hostname.toLowerCase(); $( "a" ).each( function () { var href = this.href.toLowerCase(); if (href.indexOf( "http" ) === 0 && href.indexOf(hostname) === -1) { $(this).addClass( 'external' ).click( function (e) { e.preventDefault(); window.open(href, '_blank' ); }); } }); }); })(jQuery); |
The script also adds a class of external to each outbound link, allowing you to style them in some way that differentiates them from normal links. Using JavaScript (and jQuery) for this purpose, offers a few benefits:
- All outbound links are targeted in one fell swoop.
- Adding target="_blank" to links is invalid markup when using the XHTML Strict 1.0 doctype.
—
Posted Wed, 7 Dec 2011 - 12:07