九月 2

【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 属性主要为了说明“该链接”与“包含该链接的页面”之间的关系。

本文网址:http://nan.im/blog/1085 转载需注明出处!
This site is licensed under a Creative Commons BY-NC-SA 3.0 License.
本站使用 创作共用版权协议 转载本站内容也必须遵循"署名-非商业性使用-相同方式共享"的共同创作协议。

发表评论:

NOTICE: You should type some Chinese Word in your comment to pass the spam-check, thanks !

小提示:请务必填写正确的邮箱地址(推荐 QQ 邮箱)以便能及时收到我的回复,另未包含中文的评论将被过滤!



Themed by anyLiv. Copyright © 2010. Some right reserved.