ScioSoft's Community Blogs Optimized IT musings for the technically inclined

Open external links in a new window: Add target="_blank" using jQuery

by James Fielding 5. February 2011 13:32

When it comes to site optimization, there's always lots to do. Richard Florance has a great post on making ASP.NET sites run more efficiently. One thing that Richard doesn't talk about is on the client-side, specifically using jQuery (or JavaScript) to add repetitive, non-critical, page elements and attributes. Here's a quick tip that you can use to reduce a page's size: Add target="_blank" to <a> tags using jQuery.

$("a").filter(function () {
        return this.hostname && this.hostname !== location.hostname;
    }).each(function () {
        $(this).attr({
            target: "_blank",
            title: "Visit " + this.href + " (click to open in a new window)"
        });
    });

The above code filters all the hyperlink tags by hostname, and then adds a target="_blank" as well as a title attribute to each external link. If you don't like the title attribute, change or remove it. You could also take this one step further and add a css class or image/styling directly to each external link to identify them as external (although you could accomplish this using straight css, too); I'll leave this to you.

Of course, to implment this, you'll likely want to add this jQuery code snippet to your global $(document).ready function, and you'll need to referrence the jQuery library in your HTML. If you're new to jQuery, check out this tutorial to get you started.

The nice thing about this approach is that the snippet can be added to an existing site in a matter of minutes. Obviously, you don't want to use this method to add mission critical elements/attributes to your site, unless you can ensure that every user will have JavaScript enabled.

Happy External Linking,
James Fielding

kick it on DotNetKicks.com
Shout it

Sciosoft Systems is a Canadian web design & development company based in Muskoka, which is in central Ontario. We provide ASP.NET website & Windows Server application development services to small and medium-sized business, as well as local government and not-for-profit groups. If you have a website project you’d like to discuss, please visit us at www.sciosoft.com.

Share |

Tags: , , ,

jQuery | Web Design

Comments (2) -

jQuery External Links
jQuery External Links United States
7/26/2011 4:09:33 PM #

I like to use the following jQuery for external links:
$(function() {
    $("a[href*='http://']:not([href*='"+location.hostname.replace("www.","")+"'])").each(function() {
        $(this).addClass('externalLink').attr('target', "_blank");
    });
});

It will insure that the links is actually external and also adds a class to the element so that is can be styled. For example, I like to add an external link icon to the links.

Cheers!

sciojim
sciojim Canada
9/7/2011 9:11:59 PM #

Thanks for your example. I prefer using .filter, as it should give you a slight performance boost. Great job highlighting the .addClass . As I alluded to, in my example you could add:

$(this).attr({
    // Other stuff here
    class: "externalLink"
});  

Pingbacks and trackbacks (1)+

Comments are closed

RecentComments

Comment RSS

The opinions expressed herein are the personal opinions of the contributors and do not necessarily represent the views of Sciosoft Systems Inc.