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

Question

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

73

假设我有以下代码：

<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 会在 link_other div 中的所有链接中添加 target="_blank"。

我该如何使用 JavaScript 实现这个功能？

- kakkalo

1

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

7个回答

61

非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');
}

- Mike Robinson

3

应该使用 getElementsByTagName 而不是 getAttributesByTagName。 - Chris Doggett

或者只需将linkList[i].target = '_blank'; - James

这个版本在我使用WordPress时非常好用，特别是在使用Elementor添加target="_blank"到RSS订阅源时。 - Adam Falchetta

8

请注意，通常情况下，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)

});

- Bayard Randel

虽然我大部分同意你的观点，但我认为target blank和“rel ='external'”技巧确实有其用处，特别是当你链接到PDF文件时。 - Mike Robinson

rel="external" 很有趣 -- http://www.sitepoint.com/article/standards-compliant-world/3/ -- 不过看起来需要与 JavaScript 结合使用才能使其正常工作。它确实允许您避免在 html 中内联使用被禁止的 xhtml 属性 "target"。感谢提及，Mike。rel="external" 值得关注。 :-) - artlung

吉米，你这么做的理由是什么？明明可以用相对路径啊。 - Bayard Randel

1

在这里看到J.Nielson的名字让我想起了http://bokardo.com/archives/comic-jakob-who/;-) - naivists

我知道这篇文章发布已经有一段时间了，但我今天还是经常看到同样的问题。有些人在回答问题之前会先对使用所请求的信息带来的负面影响进行抱怨，但却没有回答被问到的具体问题。jQuery 不等同于 JavaScript。 - Abandoned Cart

6

使用jQuery：

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

- Pim Jager

1

你不能只是这样做吗：$('#link_other a').attr('target', '_blank');？ - Tim Frey

更短的代码是： $('#link_other a').attr('target', '_blank'); 就像artlung发布的那样。 - Thomas Stock

3

我在每个外部链接上都使用这个：

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');
    }
  }
}

- soft0nic

这对我非常完美地工作，即使是具有指定类的a链接也能正常运行。谢谢！ - Supertecnoboff

1

内联：

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

- cfree

0

使用此代码来处理所有外部链接

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

- gidzior

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- artlung · Accepted Answer

/* 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.');