在新标签页中打开所有外部 URL

Question

我的网站有大量的内部和外部 URL。

对于我的主机名或 "#" href 它应该在同一个选项卡中打开，但对于任何其他域，我的主机名应该在新选项卡中打开。

此代码使所有 url 在新选项卡中打开，包括内部链接。

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

也尝试过（）

$(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
      }
   })
     
});

请在HTML、javascript或PHP中提供解决方案。

Answer 1

尝试在 'a' 标签内添加 'a' 标签，在 'a' 标签内添加 link 和 target="_blank"

Answer 2

使用 javascript 您可以遍历所有链接并将 target="_blank" 添加到与当前域不匹配的任何链接：

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

Answer 3

您可以遍历所有 a 元素并检查它是否 href 包含 http:// 或 https:// 如果是，则设置 target="_blank"在 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>

在新标签页中打开所有外部 URL

Open all external URL in new tab

html

javascript

php

ajax

jquery