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 ()

$(document).ready(function() {

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

      // NEW - excluded domains list
      var excludes = [
         'google',
         'www.example',
         '*.example'
      ];
      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
      }
   })
     
});

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./a/12071371)

$(document).ready(function() {

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

      // NEW - excluded domains list
      var excludes = [
         'google.',
         'www.example.',
         '*.example.'
      ];
      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.

• javascript
• php
• html
• jquery
• ajax

Share Improve this question Follow edited May 21, 2022 at 18:25 ANUJ SHARMA asked May 21, 2022 at 16:58 ANUJ SHARMAANUJ SHARMA 2111 silver badge66 bronze badges 3

• In addition to the base tag, use target="_self" on links that should override that. Or, if there are more links that should open in the current tab, don't use base at all and just add target="_blank" to the links that should be external. – Scott Marcus Commented May 21, 2022 at 17:26
• @ScottMarcus there is tons of links and i cannot add target="_self" or target="_blank" for all of them – ANUJ SHARMA Commented May 21, 2022 at 17:41
• Create a JS that checks all <a>s href attribue. If it doesn't contain your domain name or is not #, add target="_blank" to the <a> – user8034901 Commented May 21, 2022 at 17:58

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 6

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.">external link</a>
  <a href="http://stackoverflow.">external link 2</a>
</div>
<div id="test" class="content">blah</div>

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>