Open all external URL in new tab-CodePudding

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.

CodePudding user response：

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 >
  <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" >blah</div>

CodePudding user response：

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>

CodePudding user response：

try adding an 'a' tag inside the tag with the link and target="_blank" inside the 'a' tag