How to automatically add target = "_ blank" only to external links?

Question

I am creating custom industry specific cms (using django). In the backend, webmasters can specify either an internal link, for example. "/ page1" or an external link to use for various navigation elements on the website (all use <a> when rendering). The problem is that I would like internal links to open on the current tab, but external links should use target="_blank" to open a new tab or window.

How can I process html for this?

I would prefer a server-side solution, but I don't know of any clean way to pre-create mappable templates in django. So I guess the easiest way to do this is probably the javascript / jquery: script solution, which runs when each page loads, which adds the target = "_ blank" attribute to all external links, but not internal links. But I'm not sure how to do this.

Answer 1

I used the following for a while. I can’t remember where I found it from:

 $.expr[':'].external = function(obj){ return !obj.href.match(/^mailto\:/) && (obj.hostname != location.hostname) && !obj.href.match(/^javascript\:/) && !obj.href.match(/^$/) }; 

This adds a selector :external jQuery, so you can simply do:

 $('a:external').attr('target', '_blank'); 

The good part about using a custom selector is that if you need to change what constitutes an “external” link, you can change it in one place and not worry about the rest of your code. For example, in my organization we have certain subdomains that are not “external”, but which we still want to open in new windows.

Answer 2

Try something like

 for (var links = document.links, i = 0, a; a = links[i]; i++) { if (a.host !== location.host) { a.target = '_blank'; } } 

Remember to run the script by the time all the links exist in the document tree - in window.onload .

Answer 3

You can do something like this:

 $(document.body).on('mouseover', 'a[target!=_blank]:not(.local)', function (evt) { var a = $(this); var href = a.attr('href'); var domain = href.match(/^https?:\/\/([^:\/]+)/); if (domain && domain[1] && domain[1] !== "yourdomain.com") { a.attr('target', '_blank'); } else { a.addClass('local'); } }); 

This will process each link when clicking on it and not process each link more than once. If it should be external, target will be set to _blank , and it should be open in a new window. This is where jsfiddle works .

Update . My method of determining whether a link remains in place or not is pretty rude. The method in this answer is more thorough. I would most likely replace my simple regular result with this test.

Answer 4

I recommend you this server side. Change the page template depending on the location of the link.

Answer 5

You can also do this:

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

or

 $('a').each(function() { var a = new RegExp('/' + window.location.host + '/'); if(!a.test(this.href)) { $(this).click(function(event) { event.preventDefault(); event.stopPropagation(); window.open(this.href, '_blank'); }); } });