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

Question

假设我有以下代码:

<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做到这一点？

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

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

Answer 3

请记住,Web开发人员和可用性专家通常认为这样做是不好的做法.Jakob Nielson对此有关删除用户浏览体验的控制权:

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

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

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

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

你可以用jquery做到这一点:

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

});

Answer 4

使用jQuery:

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