【jQuery】使用 js & jQuery 控制链接在新窗口 _blank 打开

既然 W3C 严格标准将 target=”_blank” 属性剔除，原因是 W3C 认为未经用户同意就打开新窗口是一种不礼貌的行为，容易破坏用户体验。那么问题来了，如何能即符合 W3C 严格标准又能使页面在新窗口打开呢？按 W3C 的意思是为需要弹出新窗口的 a 链接标记添加一个 rel=”external” 属性，或许等这种标准普及以后可以通过浏览器设置是否弹出包含有 rel=”external” 属性的链接，不过目前的情况是用户希望浏览器拼命的屏蔽各种弹出广告而同时 target=”_blank” 又是我们需要的属性，具体代码可按以下方法书写……

1、为需要弹出新窗口的 a 标记添加 rel=”external” 属性；

2、为页面添加 js 或 jQuery 代码；

a、纯 JavaScript 代码：

function externallinks(){
  if (!document.getElementsByTagName) return;
  var anchors = document.getElementsByTagName("a");
  for (var i=0; i
b、使用 jQuery 添加下面一句代码即可：
$("a[@rel$='external']").click(function(){ this.target = "_blank"; });

可以看出使用 jQuery 确实是 “Write Less Do More” 的非常方便。当然如果你跟我一样正在使用 WordPress 或通常想偷懒而不愿意手工为一些 a 链接添加 rel 属性的话，可直接添加下面的 jQuery 代码：

$(".post > .body a").not(".more-link").attr("target","_blank");

这句 jQuery 代码是为所有博客正文中的 a 标签硬性添加 target="_blank" 属性值而不考虑 rel="external" 属性，其中 post 和 body 类名需要根据你的主题模板调整，因为通常正文中引用的链接绝大多数都需要新开窗口浏览，而网站的其他导航部分的链接通常不需要新开窗口。

补充：用于 a 标签的 rel 属性还有其他的一些值如：next、previous、chapter、section 等等，在 W3C 中 rel 属性主要为了说明“该链接”与“包含该链接的页面”之间的关系。