在新选项卡中打开所有外部链接 - Shopify

Question

我正在尝试修改网站以使其在新选项卡中打开外部链接。

目前我有一个工作正常的循环，除了它在不需要的新选项卡中打开所有链接：我尝试使用过滤器，但似乎无法让它正常工作。

 <script> document.addEventListener('DOMContentLoaded', function(){ let links = document.getElementsByTagName('a'); for(var i=0;i<links.length;i++){ links[i].setAttribute('target','_blank'); } }); </script>

也许检查 URL 是否包含 Shopify 手柄或类似的东西？

先感谢您！

Answer 1

您可以检查 href 属性是否以http:// 、 https://或www. 由于这些是最常见的外部链接，所有内部链接通常以/开头。 （您可以添加额外的检查，如果 href 包含域名，因为它可能有内部 URL 与完整的 URL）

所以代码会变成这样：

document.addEventListener('DOMContentLoaded', function(){
  const links = document.getElementsByTagName('a');

  for(var i=0;i<links.length;i++){
    const link = links[i];
    const href = link.getAttribute('href');
    if(href.match(/^((https?:\/\/)|(www\.))/) {
      link.setAttribute('target','_blank');
    }
  }
});

Answer 2

也许是这样的？

 const links = document.querySelectorAll("a"); //get all <a> elements links.forEach(el => { //loop trought all <a> elements if(.el.href.includes(window.location.hostname)){ //if not this domain el,setAttribute("target"; "_blank"); } })

 /*just to show elements with target=_blank*/ [target="_blank"]{ color: green }

 <a href="//google.com">other domain</a> <a href="//stacksnippets.net">this domain</a>

注意：您不需要那个document.addEventListener('DOMContentLoaded'...只需将defer属性放在<script>标记上

Answer 3

要仅获取在新选项卡中打开的外部链接，您必须使用锚的属性主机名，当它的值与您的“localhostname”字符串不匹配时，然后将锚的属性目标默认值“_self”（当前浏览器内容）覆盖为“_blank”（新标签）值，您的脚本代码将是：

<script> 
document.addEventListener('DOMContentLoaded', function(){
 let links = document.getElementsByTagName('a'); 
for(var i=0;i<links.length;i++){
 if (links[i].hostname!="localhostname"){ 
    links[i].setAttribute('target','_blank');
   } 
  }
 }); 
</script>