jQuery add target="_blank" for outgoing link

Question

I need some help to create jquery script :)
I have some of link like this on my HTML.

<a href="http://google.com">Google</a> <a href="/">Home</a> <a href="http://www.gusdecool.com/">Home</a> <a href="contactus.html">Contact Us</a>

And now i want jQuery to check all of the link on my page. if that link is outside of my server (my server is gusdecool.com). Then add target="_blank". and the result will be like this

<a href="http://google.com" target="_blank">Google</a> <a href="/">Home</a> <a href="http://www.gusdecool.com/">Home</a> <a href="contactus.html">Contact Us</a>

Possible duplicate of How do I add target="_blank" to a link within a specified div? — chimos
– chimos, Commented May 12, 2016 at 13:27

Moin Zaman · Accepted Answer · 2011-10-26 11:00:36Z

71

assuming that all external links will start with http:// you could do this:

$('a[href^="http://"]').not('a[href*=gusdecool]').attr('target','_blank');

answered Oct 26, 2011 at 11:00

Moin Zaman

25.5k6 gold badges74 silver badges74 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

GusDeCooL Over a year ago

nope, please see my comment for Joakim for the explanation :)

gion_13 Over a year ago

an external site could still start only with www and any other link that contains the gusdecool keyword (ex : a subdomain such as http://sub.gusdecool.com) is still considered external to the current webpage.

Jörn Over a year ago

I came across this thread after searching for a quick solution for external links and I think the selector should be $('a[href^="http://"], a[href^="https://"]'). to match https links as well.

redanimalwar Over a year ago

This will not include https sites, you should probably just use $('a[href^="http"]').not('a[href*=gusdecool]').attr('target','_blank');

johnnydoe82 Over a year ago

I needed to set "gusdecool" into single or double quotes to make the code work.

Ryan Doom · Accepted Answer · 2013-07-27 00:39:12Z

19

$('a').each(function() { var a = new RegExp('/' + window.location.host + '/'); if (!a.test(this.href)) { $(this).attr("target","_blank"); } });

This was from css-tricks.com, seems to work pretty well.

answered Jul 27, 2013 at 0:39

Ryan Doom

2,3911 gold badge16 silver badges13 bronze badges

1 Comment

Falk Over a year ago

I have two questions: 1) does this work with relative links like <a href="/">Home</a>? 2) why don't you put var a = new RegExp('/' + window.location.host + '/'); befor the loop?

gion_13 · Accepted Answer · 2011-10-26 11:07:00Z

$('a[href^=http]:not([href^=http://www.gusdecool.com/])').attr('target','_blank');

Of course, this works only if all the external links start with the http protocol. You should adapt this code to suite your needs (suchs as links without protocols, or with different protocols).

UPDATE :

$('a[href^=http]:not([href^=http://www.gusdecool.com],[href^=http://gusdecool.com])') .add('a[href^=www]:not([href^=www.gusdecool.com])') .attr('target','_blank');

It selects all the a elements that have their href attribute starting with a web page address (with or without protocol) and do not point to your site's address and changes their target attribute to _blank.

Nice jQuery selector! This should get voted above the selected correct answer as it is the best/fastest solution.
You might want to add "s? Because I'm getting unrecognized expressions.
Using these jQuery selectors can affect javascript performance.

Andy Hoffman · Accepted Answer · 2016-07-27 21:05:18Z

13

This function seems to be easier if you have a subdomain:

$('a').attr('target', function() { if(this.host == location.host) return '_self' else return '_blank' });

edited Jul 27, 2016 at 21:05

Andy Hoffman

19.2k5 gold badges50 silver badges68 bronze badges

answered Jun 28, 2015 at 12:51

Guyom

1311 silver badge5 bronze badges

1 Comment

keepAlive Over a year ago

This is the best answer to me, since totally agnostic (i.e. not hard-written stuffs) and fully explicit. +1

Pavel Strakhov · Accepted Answer · 2012-05-11 05:19:12Z

jQuery(document).ready(function(){ target_luar(); }); function target_luar(){ try{ if(top.location != location) { jQuery("a[href^='http']") .not("[href*='"+location.host+"']") .attr('target','_blank'); } } catch(err) { } }

Demo : Demo jQuery External Link

Pedro Dias · Accepted Answer · 2013-06-14 17:56:59Z

Global function to open external links in a new window:

$(function(){ // document ready $("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)" }); }); });

A word of caution (applies to many solutions on this page): if you have a mailto link, it will also receive a target attribute, which could lead to undesirable behavior (in Chrome, it works but also opens an extra blank tab).

boateng · Accepted Answer · 2018-10-02 18:59:44Z

Putting it all together we get the following.. Wait for it all to load, select only links starting with http or https, check if the link point to the same domain (internal) or another domain (external), add appropriate target if match found..

$(window).load(function() { $('a[href^="http"]').attr('target', function() { if(this.host == location.host) return '_self' else return '_blank' }); });

It would be great if you could provide a short explanation of your code!

Shai Mishali · Accepted Answer · 2011-10-26 10:59:50Z

You could use jQuery's $.each function to iterate over all Anchor tags, perform the needed check and set the "target" attribute using $(this).attr("target","_blank");

Example (Not tested but should work):

$('a').each(function(index) { var link = $(this).attr("href"); if(link.substring(0,7) == "http://") $(this).attr("target", "_blank"); });

Shai.

Joakim Serholt · Accepted Answer · 2011-10-26 11:05:55Z

1

Check each linkobject $(link).attr("href"), if that starts with http:// then its an outgoing link (?). Then assign the .attr("target", "_blank").

$(a).function(){ if($(this).attr("href").substring(0,3) == "http" && <!-- CHECK ITS NOT YOUR SITE URL -->){ $(this).attr("target", "_blank"); } };

Hope this helps.

edited Oct 26, 2011 at 11:05

answered Oct 26, 2011 at 10:59

Joakim Serholt

4236 silver badges17 bronze badges

5 Comments

Joakim Serholt Over a year ago

well kind of it is.. you will end up at the site, but it is still an outgoing link?

GusDeCooL Over a year ago

my purpose create this plugin is to make sure my visitor didn't leave my website if click a link except if that link target is inside of my website. That why i need to make special rule for outgoing link.

Moin Zaman Over a year ago

@GusDeCooL I don't think its a very good idea to stop people leaving your site to go to external sites if they wish to. They will find other ways and get frustrated if you try and stop them. Or am I misunderstanding you?

Joakim Serholt Over a year ago

He doesn't want to stop people from leaving his site. He just want external links to be _blank to make it easy for them to find their way back to his site once they are done with the external link's site. Using _blank for that purpose would be one way to do it.

GusDeCooL Over a year ago

@JoakimBörjesson Thank you for explain it to Moin :)

Benjie · Accepted Answer · 2011-10-26 11:09:17Z

Here's a fiddle demonstrating an answer using raw JS (not jQuery): http://jsfiddle.net/Xwqmm/

And here's the code:

var as = document.getElementsByTagName('a'); var re = /^https?:\/\/([^\/]*)\//; for (var i = 0, l = as.length; i < l; i++) { var href = as[i].href; var matches = href.match(re); if (matches[1] && matches[1] != "gusdecool.com") { as[i].setAttribute("target","_blank"); } }

harjinder singh · Accepted Answer · 2016-03-16 07:29:38Z

<div id="myLinks"><a href="http://google.com">Google</a><a href="/">Home</a><a href="http://www.gusdecool.com/">Home</a> <a href="contactus.html">Contact Us</a></div> <script type="text/javascript"> jQuery(document).ready(function(){ jQuery('#myLinks a').attr('target', '_blank'); }); </script>

Kaya M · Accepted Answer · 2020-03-16 00:13:12Z

This is such a brilliant site I learned so much from it :

If you do it this way you do not need to worry about http or https (handy while developing)

$('a[href^="http"]') .not('a[href*='+ location.hostname +']') .attr('target','_blank');

Mahdi Bashirpour · Accepted Answer · 2020-11-02 12:59:59Z

You can see all external link whith http and https

 jQuery('a[href^="https://"],a[href^="http://"]').not("a[href*='"+ window.location.host +"']").each(function() { console.log(jQuery(this).attr('href')) });

And you can add _blank like this

jQuery('a[href^="https://"],a[href^="http://"]').not("a[href*='"+ window.location.host +"']").attr('_target','blank');

ipr101 · Accepted Answer · 2011-10-26 11:03:44Z

You could use filter -

$("a").filter(function () { return this.indexOf('http://') > -1 && this.indexOf('gusdecool') == -1 }).attr("target","_blank");

user2394268 · Accepted Answer · 2013-05-17 14:15:28Z

Try:

$('a[href^="http://"]') .not('a[href*='+ location.hostname +']') .attr('target','_blank');

Collectives™ on Stack Overflow

jQuery add target="_blank" for outgoing link

15 Answers 15

5 Comments

1 Comment

3 Comments

1 Comment

Comments

1 Comment

1 Comment

Comments

5 Comments

Comments

Comments

Comments

Comments

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

15 Answers 15

5 Comments

1 Comment

3 Comments

1 Comment

Comments

1 Comment

1 Comment

Comments

5 Comments

Comments

Comments

Comments

Comments

Comments

Comments

Linked

Related