Open external links in a new tab without jQuery

Question

What's the best way to open all external links (URLs that don't match the current domain) in a new tab using JavaScript, without using jQuery?

Here's the jQuery I'm current using:

// Open external links in new tab
$('a[href^=http]').click(function () {
    var a = new RegExp('/' + window.location.host + '/');
    if (!a.test(this.href)) {
        window.open(this.href);
        return false;
    }
});

score 25 · Accepted Answer · answered Oct 30 '12 at 20:39

25

Pure JS:

function externalLinks() {
  for(var c = document.getElementsByTagName("a"), a = 0;a < c.length;a++) {
    var b = c[a];
    b.getAttribute("href") && b.hostname !== location.hostname && (b.target = "_blank")
  }
}
;
externalLinks();

answered Oct 30 '12 at 20:39

eyecatchUp

10,032
4
55
65

score 1 · Answer 2 · answered Jan 25 '21 at 23:43

The links property returns a collection of all <area> and <a> elements in a document with a value for the href attribute.

   var links = document.links;
    for(var i = 0; i < links.length; i++) {
      if (links[i].hostname != window.location.hostname) {
        links[i].target = '_blank';
      } 
    }

https://developer.mozilla.org/en-US/docs/Web/API/Document/links

score 0 · Answer 3 · answered Oct 20 '12 at 11:41

0

Add a target="_blank" to the tag. You could do that in the pre-processor (e.g. PHP) or in a JS during the onload event.

answered Oct 20 '12 at 11:41

Sebastian Meine

11,260
29
41

Are you looking for a way to do the above in JavaScript but without using jQuery? If so, do you have any other library, or does it have to be plain JS? – Sebastian Meine Oct 20 '12 at 18:47

Sameera Thilakasiri · Answer 4 · 2012-10-20T12:49:17.913

0

       $("a[href^=http]").each(function(){
          if(this.href.indexOf(location.hostname) == -1) {
             $(this).attr({
                target: "_blank",
                title: "Opens in a new window"
             });
          }
       })

This script should work for you.

UPDATE : try this fiddle http://jsfiddle.net/sameerast/GuT2y/

JS version

    var externalLinks = function(){
      var anchors = document.getElementsByTagName('a');
      var length = anchors.length;
      for(var i=0; i<length;i++){
        var href = anchor[i].href;
        if(href.indexOf('http://sample.com/') || href.indexOf('http://www.sample.com/')){
          return;
        }
        else{
          anchor[i].target='_blank';
        }
      }
    };

edited Oct 20 '12 at 12:49

answered Oct 20 '12 at 11:46

Sameera Thilakasiri

9,452
10
51
86

Does that not use jQuery's [.each()](http://api.jquery.com/jQuery.each/) function? – Alec Rust Oct 20 '12 at 11:48
It used and add the target="_blank", then user click on it goes to the link as new tab/window – Sameera Thilakasiri Oct 20 '12 at 11:53
Like I say, does your solution not use jQuery's .each() function? My question specified no use of jQuery. – Alec Rust Oct 20 '12 at 11:55
Just replace the each with click. – Sameera Thilakasiri Oct 20 '12 at 12:08
http://stackoverflow.com/questions/10273890/opening-a-link-in-a-new-tab try this, No worries to giving me negative score. – Sameera Thilakasiri Oct 20 '12 at 12:13
Already seen that answer and it wasn't a non-jQuery equivalent of my jQuery script. – Alec Rust Oct 20 '12 at 12:17

Open external links in a new tab without jQuery

4 Answers4

Linked

Related