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

假设我有以下代码：

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

我怎样才能使用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

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

如果可能的话，避免产生多个浏览器窗口 – 从用户处取走“后退”button可能使他们的经验如此痛苦，以至于通常远远超过您尝试提供的任何好处。 赞成产生第二个窗口的一个普遍的理论是，它使用户不会离开你的网站，但具有讽刺意味的是，它可能有相反的效果，防止它们返回时，他们想要的。

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

如果你决定采取这种方法，Pim Jager的解决scheme是好的。

一个更好，更友好的想法是将一个graphics附加到所有的外部链接，向用户指出，跟随链接将把它们带到外部。

你可以用jQuery来做到这一点：

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

Answer 4

使用jQuery：

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

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

Answer 6

一致：

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

Answer 7

使用这个为每个外部链接

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