Question 69618 in Ajax Question posted in
You can find the official documentation here.

Open all external URL in new tab – Jquery ajax

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.

Tags:

2

Answers


  1. 0

    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>
    Login or Signup to reply.
  2. 0

    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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search