假设我有以下代码：
<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 做到这一点？
/* 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.');
非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');
}
请记住，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)
});
使用 jQuery：
$('#link_other a').each(function(){
$(this).attr('target', '_BLANK');
});
我将它用于每个外部链接：
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');
}
}
}
排队：
$('#link_other').find('a').attr('target','_blank');
将此用于每个外部链接
$('a[href^="http://"], a[href^="https://"]').attr('target', '_blank');