如何将target =“_ blank”添加到指定div中的链接？

Let's say I have the following code:

假设我有以下代码：

<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>

In this case, the JavaScript would add target="_blank" to all links within the div link_other.

在这种情况下，JavaScript会将div =“_ blank”添加到div link_other中的所有链接。

How can I do that using JavaScript?

我怎么能用JavaScript做到这一点？

7 个解决方案

#1

116

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

You could also add a title tag to notify the user that you are doing this, to warn them, because as has been pointed out, it's not what users expect:

您还可以添加标题标记以通知用户您正在执行此操作，以警告它们，因为正如已经指出的那样，它不是用户期望的：

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

#2

Non-jquery:

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

#3

Bear in mind that doing this is considered bad practice in general by web developers and usability experts. Jakob Nielson has this to say about removing control of the users browsing experience:

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

Avoid spawning multiple browser windows if at all possible — taking the "Back" button away from users can make their experience so painful that it usually far outweighs whatever benefit you're trying to provide. One common theory in favor of spawning the second window is that it keeps users from leaving your site, but ironically it may have just the opposite effect by preventing them from returning when they want to.

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

I believe this is the rationale for the target attribute being removed by the W3C from the XHTML 1.1 spec.

我相信这是W3C从XHTML 1.1规范中删除目标属性的基本原理。

If you're dead set on taking this approach, Pim Jager's solution is good.

如果你已经开始采取这种方法，Pim Jager的解决方案是好的。

A nicer, more user friendly idea, would be to append a graphic to all of your external links, indicating to the user that following the link will take them externally.

一个更好，更用户友好的想法是将图形附加到所有外部链接，向用户指示跟随链接将从外部链接。

You could do this with jquery:

你可以用jquery做到这一点：

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

});

#4

Using jQuery:

使用jQuery：

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

#5

I use this for every external link:

我将此用于每个外部链接：

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

#6

Inline:

一致：

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

#7

Use this for every external link

用于每个外部链接

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

#1

116

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