如何将 target="_blank" 添加到指定 div 中的链接？答案

【问题标题】：How do I add target="_blank" to a link within a specified div?如何将 target="_blank" 添加到指定 div 中的链接？
【发布时间】：2009-04-29 21:02:16
【问题描述】：

假设我有以下代码：

<div id="link_other">
    <ul>
        <li><a href="http://www.google.com/">google</a></li>
        <li>
            <div class="some_class">
                dsalkfnm sladkfm
                <a href="http://www.yahoo.com/">yahoo</a>
            </div>
        </li>
    </ul>
</div>

在这种情况下，JavaScript 会将target="_blank" 添加到 div link_other 内的所有链接。

如何使用 JavaScript 做到这一点？

【问题讨论】：

为什么不让 JavaScript 检测哪些链接是外部链接？

标签： javascript hyperlink external-links

【解决方案1】：

/* here are two different ways to do this */
//using jquery:
$(document).ready(function(){
  $('#link_other a').attr('target', '_blank');
});

// not using jquery
window.onload = function(){
  var anchors = document.getElementById('link_other').getElementsByTagName('a');
  for (var i=0; i<anchors.length; i++){
    anchors[i].setAttribute('target', '_blank');
  }
}
// jquery is prettier. :-)

您还可以添加一个标题标签来通知用户您正在这样做，以警告他们，因为正如已经指出的那样，这不是用户所期望的：

$('#link_other a').attr('target', '_blank').attr('title','This link will open in a new window.');

【讨论】：

他要的是 javascript，而不是 jQuery。
更准确地说，你可以使用锚点： let anchors = document.querySelectorAll('#sources + div a'); // 更改选择器并使用 ES6 代替 for 循环： anchors.forEach((elem) => { elem.setAttribute('target', '_blank') }

【解决方案2】：

非 jquery：

// Very old browsers
// var linkList = document.getElementById('link_other').getElementsByTagName('a');

// New browsers (IE8+)
var linkList = document.querySelectorAll('#link_other a');

for(var i in linkList){
 linkList[i].setAttribute('target', '_blank');
}

【讨论】：

不是getAttributesByTagName，不应该是getElementsByTagName吗？
或者只是 linkList[i].target = '_blank';

【解决方案3】：

请记住，Web 开发人员和可用性专家通常认为这样做是不好的做法。 Jakob Nielson 对取消对用户浏览体验的控制有这样的说法：

尽可能避免生成多个浏览器窗口 - 将“后退”按钮从用户手中移开会让他们的体验变得如此痛苦，以至于它通常远远超过您试图提供的任何好处。支持生成第二个窗口的一个常见理论是，它可以防止用户离开您的网站，但具有讽刺意味的是，它可能会阻止他们在想要返回时返回，从而产生相反的效果。

我相信这是 W3C 从 XHTML 1.1 规范中删除 target 属性的理由。

如果您执意采用这种方法，Pim Jager 的解决方案很好。

一个更好、对用户更友好的想法是将图形附加到所有外部链接，向用户表明点击链接会将它们带到外部。

你可以用 jquery 做到这一点：

$('a[href^="http://"]').each(function() {
    $('<img width="10px" height="10px" src="/images/skin/external.png" alt="External Link" />').appendTo(this)

});

【讨论】：

虽然我基本同意你的说法，但我认为 target blank 和“rel='external'”技巧确实有它们的位置，尤其是当你链接到 PDF 时。跨度>
rel="external" 很有趣——sitepoint.com/article/standards-compliant-world/3——尽管它看起来需要与 JavaScript 结合使用才能使其工作。不过，它确实允许您避免在 html 中内联使用不允许的 xhtml 属性“target”。不过，谢谢你提到它，迈克。 rel="external" 值得关注。 :-)
吉米，当您可以使用相对路径时，您这样做的理由是什么？
在这里读到 J.Nielson 的名字让我想起了bokardo.com/archives/comic-jakob-who ;-)
我知道这是很久以前发布的，但我发现今天同样的问题经常发生。有人在他们的回答开始前就对使用所请求信息的不利方面进行了咆哮，但随后未能回答所提出的具体问题。 jQuery 与 JavaScript 不同。

【解决方案4】：

使用 jQuery：

 $('#link_other a').each(function(){
  $(this).attr('target', '_BLANK');
 });

【讨论】：

你不能这样做：$('#link_other a').attr('target', '_blank'); ?
较短的是：$('#link_other a').attr('target', '_blank');正如 artlung 发布的那样

【解决方案5】：

我对每个外部链接都使用它：

window.onload = function(){
  var anchors = document.getElementsByTagName('a');
  for (var i=0; i<anchors.length; i++){
    if (anchors[i].hostname != window.location.hostname) {
        anchors[i].setAttribute('target', '_blank');
    }
  }
}

【讨论】：

这对我来说非常有效，即使 a 链接具有指定的类。谢谢！

【解决方案6】：

内联：

$('#link_other').find('a').attr('target','_blank');

【讨论】：

【解决方案7】：

对每个外部链接都使用这个

$('a[href^="http://"], a[href^="https://"]').attr('target', '_blank');

【讨论】：