分文网

利用jQuery实现链接在新窗口打开

Posted by admin on 八月 4th, 2010

关于jQuery自己也是似懂非懂，前面就介绍过利用jQuery实现侧边栏Tab切换效果。今天正好看到我爱水煮鱼的博客里有篇关于jQuery的另一应用，正好拿来一起分享。

我们经常会在文章中插入一些链接，一般我们都希望用户点击后在新的窗口（或新的选项卡)打开链接，所以我们都会给链接添加target=”_blank”属性，如果链接比较多的话，一个一个添加，显然令人厌烦。而且虽然target=”_blank”符合w3c的XHTML 1.0 Transitional标准，但却不符合XHTML 1.0 Strict标准，所以添加这个属性显然是要被废弃的。

而w3c标准建议里也给出了用rel=”external”来替代target=”_blank”，不过仍然需要定义external属性，也就是说先要写一个js文件，内容如下：

function externallinks() {
if (!document.getElementsByTagName) return;
var anchors = document.getElementsByTagName("a");
for (var i=0; i<anchors.length; i++) {
var anchor = anchors[i];
if (anchor.getAttribute("href") &&
anchor.getAttribute("rel") == "external")
anchor.target = "_blank"; }
}
window.onload = externallinks;

保存为external.js文件上传到服务器，然后再在footer.php或者其它地方调用此文件：

<script type="text/javascript" src="http://www.ifenwen.com/wp-content/themes/shadowblue/external.js"></script>;

所以说这种方法也不可取，仅仅为了符合标准，不仅没有减少工作量，否则还增加了不少。再者添加rel=”external”一样还是令人头疼。

不过现在有了更好的方法，那就是利用jQuery。有了jQuery，我们只需要几句代码即可搞定。

$("a[href*='http://']:not([href*='"+location.hostname+"']),[href*='https://']:not([href*='"+location.hostname+"'])")
.addClass("external")
.attr("target","_blank");

利用这样的代码就给链接标签增加一个target属性，并且给他赋值为 _blank。当然上述的语句是不包括自己网站的链接，就是说如果引用的是自己网站的链接，也需要在新窗口打开的话，就要将not部分的内容去掉，变成$(“a[href*='http://']:,[href*='https://']:”)这样就不用一个一个手动输入了，而且这样代码是标准的，并且外部链接在新窗口打开。

至于jQuery的使用方法，具体可以参考以前的利用jQuery实现侧边栏Tab切换效果。简而言之，就是先加载jQuery库；然后在js文件写入控制代码；最后调用js文件。

相关文章:

标签：, , ,
«
»
  1. 小松 2010-08-04,14:18 [回复]

    呵呵，这个已经从老万那学来了~

  2. admin 2010-08-04,14:27 [回复]

    恩 我已经落伍了~~~
    你现在成了我的专业沙发手啊

  3. zwwooooo 2010-08-04,14:32 [回复]

    我的评论链接就是这样的

  4. admin 2010-08-04,14:34 [回复]

    所以说 我落伍了~~
    问下 你们对自己的链接是如何处理的呢 not部分要还是不要

  5. 郑州seo甜甜 2010-08-04,15:38 [回复]

    恩，学习了 虽然用的不是wp的系统…以后也会用到

  6. zwwooooo 2010-08-04,15:45 [回复]

    自己的链接没处理

  7. 搜搜 2010-08-04,16:01 [回复]

    不是很喜欢在新窗口里打开

  8. 创享·生活 2010-08-04,16:22 [回复]

    真是杯具啊。什么符不符合标准，有一个那个属性不就好了吗，呵呵

  9. 治疗颈椎病的枕头 2010-08-04,20:22 [回复]

    这个在什么地方看到过？

  10. interjc 2010-08-04,20:44 [回复]

    貌似不是addClass(‘external’)而是attr(‘rel’,'external’)
    另外你最后一句.attr(“target”,”_blank”);岂不是又把不符合标准的代码加上了么？
    你这句可以换成这样
    $(‘a:not([href*='+location.hostname+'])’).attr(‘rel’,'external’).click(function(){
    window.open($(this).attr(‘href’));
    return false;
    });

    没在自己电脑，以上代码未经测试完全手敲，如有错误请勿拍砖，呵呵

  11. 网络推广王准之 2010-08-04,21:29 [回复]

    在新窗口打开感觉没有在原有的基础上好….

  12. N 2010-08-04,21:40 [回复]

    这个已经在用了，原理还是比较简单的~~

  13. 什么减肥药最好 2010-08-05,00:37 [回复]

    我用的就是WP2.9版~~~~~

  14. 河海浪子 2010-08-05,06:03 [回复]

    还没用到啊。学习啊

  15. 阿邙 2010-08-05,07:44 [回复]

    话说我无视w3c

  16. admin 2010-08-05,07:59 [回复]

    谢谢老大的指点啊
    上述代码经自己这边测试可以正常实现新窗口打开的目的

    而至于最后一句 的问题 因为最后还是采用调用js文件的方式 所以并不影响w3c的验证

    如不相信 可以去验证看看哦
    http://validator.w3.org/check?uri=http%3A%2F%2Fwww.ifenwen.com%2Fopen-external-links-with-jquery%2F&charset=%28detect+automatically%29&doctype=Inline&group=0

  17. admin 2010-08-05,08:11 [回复]

    老大 还得麻烦你 不知可否帮帮忙啊

  18. diyidu 2010-08-05,08:37 [回复]

    不会吧?这个也要用JQ来整?好处是什么?

  19. admin 2010-08-05,08:46 [回复]

    不用写 target=”_blank” 也不用写rel=”external”
    符合w3c标准

  20. BoKeam 2010-08-05,10:14 [回复]

    没怎么看懂

  21. 球球 2010-08-05,10:35 [回复]

    看不懂看不懂。。。点广告闪人吧还是。。 :arrow:

  22. WordPress啦 2010-08-05,14:31 [回复]

    这个我也看过哦！ :smile:

  23. 西门 2010-08-05,20:30 [回复]

    呵呵，还在研究W3C呀，其实只要没有错误标签就OK了，这些都可以忽略的。

  24. 天天天蓝 2010-08-05,21:17 [回复]

    JS添多了我怕影响速度，如果必要的话我还是加个target；

  25. ntaq 2010-08-06,04:56 [回复]

    来了留个小脚丫，呵呵

  26. 海天 2010-08-06,14:39 [回复]

    呵呵 jQ还是很强大的 我好多效果也是jQ弄出来的

  27. 用 JQuery 实现新窗口打开 WordPress 评论者链接 - 独来读网 2010-08-27,20:44 [回复]

    [...] [...]

  28. 老实人博客 2010-09-08,15:38 [回复]

    原来如此。我目前可以不用它们。先学习一下。

访客留言