CODEWITHSUNDEEP
javascriptphphtmljqueryajax
ANUJ SHARMA
ANUJ SHARMA

Reputation: 21

Open all external URL in new tab

My website have tons of internal and external URL.

for my hostname or "#" href it should open in same tab but for any other domain then my hostname should be open in new tab.

This code making all url open in new tab including internal links.

<base target="_blank" rel="noopener noreferrer">

Also tried (https://stackoverflow.com/a/12071371)

$(document).ready(function() {

   $('a[href^="https://"],a[href^="http://"]').each(function(){

      // NEW - excluded domains list
      var excludes = [
         'google.com',
         'www.example.com',
         '*.example.com'
      ];
      for(i=0; i<excludes.length; i++) {
         if(this.href.indexOf(excludes[i]) != -1) {
            return true; // continue each() with next link
         }
      }

      if(this.href.indexOf(location.hostname) == -1) {

           // attach a do-nothing event handler to ensure we can 'trigger' a click on this link
           $(this).click(function() { return true; }); 

           $(this).attr({
               target: "_blank",
               rel: "noreferrer nofollow noopener",
               title: "Opens in a new window"
           });

           $(this).click(); // trigger it
      }
   })
     
});

Please provide the solution in HTML, javascript or PHP.

Upvotes: 1

Views: 2462

Answers (2)

Scott Marcus
Scott Marcus

Reputation: 65808

You can loop over all the a elements and check to see if it's href contains http:// or https:// and if so, set target="_blank" on the link:

document.querySelectorAll("a").forEach(function(element){
  let href = element.getAttribute("href");
  
  // Check to see if the the href include http:// or https://
  if(href.includes("http://") || href.includes("https://")){
    element.target = "_blank"; // Make link open in new tab
    element.rel = "noreferrer nofollow noopener"; 
  }
  
  console.log(element); // Just for testing
});
<a href="foo.html">Link</a><br>
<a href="http://foo.html">Link</a><br>
<a href="foo.html">Link</a><br>
<a href="https://foo.html">Link</a>

Upvotes: 2

vanowm
vanowm

Reputation: 10201

With javascript you can loop through all links and add target="_blank" to any links that don't match current domain:

window.addEventListener("DOMContentLoaded", e =>
{
  document.querySelectorAll('a[href]').forEach(a =>
  {
    if (location.hostname == new URL(a.href).hostname)
      return;

    a.target = "_blank";
    a.rel = "noreferrer nofollow noopener";
  });
});
.content
{
  height: 100vh;
}
<div class="content">
  <a href="/">internal link</a>
  <a href="#test">internal link 2</a>
  <a href="https://stackoverflow.com">external link</a>
  <a href="http://stackoverflow.com">external link 2</a>
</div>
<div id="test" class="content">blah</div>

Upvotes: 6

Related Questions