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://") != -1 && 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
