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