Use jQuery to Open All External Links in a New Window

• 12 Comments
• 3 Trackbacks

1. • qO_op
   • 5.6.2008 at 1:20 pm
   • #
   • Reply »

   i love you and jQuery ;) Thanx!

2. • adam
   • 7.15.2008 at 4:28 pm
   • #
   • Reply »

   Thats good, I’m doing the same thing my self, but have extended it to not process links to the same domain, and pdfs:

   function initExternalLinks() {
   	var h = window.location.host.toLowerCase();
   	$("a[@href^='http']:not(a[@href^='http://" + h + "']):not(a[@href^='http://www." + h + "']), a[@href$='.pdf']").attr("target", "_blank");
   }

   May be a more elegant way of doing it, but it works

3. • adam
   • 7.15.2008 at 4:31 pm
   • #
   • Reply »

   Whoops, slight error there – in the “not” filter, need to remove the a tags:

   function initExternalLinks() {
   	var h = window.location.host.toLowerCase();
   	$("a[@href^='http']:not([@href^='http://" + h + "']):not([@href^='http://www." + h + "']), a[@href$='.pdf']").css({outline: 'solid 1px red'}).attr("target", "_blank");
   }

4. • Roger
   • 9.25.2008 at 9:33 pm
   • #
   • Reply »

   Thanks. This is simpler (and more up to date, the @ symbol is no longer required)

   jQuery("a[href^='http:']").not("[href*='mydomain.com']").attr('target','_blank');

5. • Trevor
   • 9.26.2008 at 1:29 pm
   • #
   • Reply »

   @Roger-
   Thanks, that makes sense if you have internal URLs that are absolute. One thing I might change is to have the attribute selector select links that start with http and not http:.

   Want to make sure to account for https links.

6. • David
   • 2.9.2009 at 8:24 pm
   • #
   • Reply »

   Hi,

   I just spent a while trying to work out why this did not work for me – looks like it’s incompatible with jQuery 1.3.1 but works OK with your 1.2.6 code.

   Any ideas on what the problem is? How to fix?

   Thanks.

   David.

7. • Trevor
   • 2.9.2009 at 8:35 pm
   • #
   • Reply »

   @David-
   Try removing the @ from the selector.

   See a Demo

8. • David
   • 2.9.2009 at 9:06 pm
   • #
   • Reply »

   Brilliant. I guess it’s easy when you know how? :)

   Thanks very much, Trevor. Much appreciated.

9. • David
   • 2.10.2009 at 9:12 am
   • #
   • Reply »

   A heads up for everyone else: I run most of my HTML through HTML Tidy (via http://www.topstyle4.com/) to check for errors and format it. Part of that forces CDATA around embedded JavaScript to make it validate with XHTML. E.g.

   That stopped the code working for me.

10. • Trevor
    • 2.10.2009 at 9:32 am
    • #
    • Reply »

    @David-
    I would not recommend using embedded JavaScript in production. I would definitely move it to an external script.

11. • Vladimir Graschenko
    • 5.4.2009 at 8:42 pm
    • #
    • Reply »

    The following code works if you need apply the “new window” rule for all dynamically added links. Useful for UI Tabs or Ajax load.

    $("a[href^='http:']:not([href*='" + window.location.host + "'][target='_blank'])").live('click', function(){
    		$(this).attr('target','_blank');
    	});
    

12. • Badger
    • 12.15.2009 at 5:22 am
    • #
    • Reply »

    Thanks Trevor for the snippet and everyone else for input. Great little piece of code.

1. • 5.2.2008 at 5:00 am
   • #

   Abrir links externos em nova janela com jQuery » Pinceladas da Web - Reflexões sobre XHTML, CSS, PHP e WebStandards

2. • 5.8.2008 at 3:44 pm
   • #

   jQuery - external links in new window: … « Random Trap

3. • 1.2.2010 at 9:28 am
   • #

   » Automatizzare il “target _blank”

Speak Your Mind