我爱水煮鱼 » 开源 » 使用 jQuery 在新窗口打开外部链接

使用 jQuery 在新窗口打开外部链接

我们一般都希望在新窗口打开外部链接,这样用户就不需要离开网站就能访问外部链接,但是如果每个外部链接都手工加上新窗口打开的属性的话,这会让人非常抓狂,并且 target=”_blank” 也不符合 XHTML 1.0 Strict 标准。

还有有了 jQuery,使用 jQuery,我们只需要几行代码就能在新窗口中打开外部链接。

首先我们需要找到所有的外部链接,在 $(document).ready() 函数添加如下代码:

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

上面这段代码查找 href 属性是以 http:// 或者 https:// 开始的,并且不包含当前域名(location.hostname)的链接(a)标签。这样我们就不会获取任何相对路径或者绝对连接中含有当前域名的内部连接。

如果我们想给外部链接加上 “external” class,添加如下的代码:

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

上面的代码给外部链接加上一个 CSS Class ,这样就可以使用 CSS 来样式化外部链接了。

如果你想外部链接在新窗口打开,继续增加如下一行代码:

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

上面的代码给链接标签增加一个 target 属性,并且给他赋值为 _blank,这样代码是标准的,并且外部链接在新窗口打开。上面就是使用 jQuery 在新窗口打开外部链接的所有代码。

标签:

分享到:

20 条评论 添加你的评论 →

  • Sivan 2010-06-07 15:49:50 #

    $("a[rel='external'],a[rel='external nofollow']").click(function(){window.open(this.href);return false})
    我这个短。。 :mrgreen:

    支持2 反对3

    • Denis 2010-06-07 15:59:51 #

      你这个要写代码的时候定义 rel= “external” 啊

      支持1 反对

      • Sivan 2010-06-07 16:12:34 #

        不用写target=’_blank’ ,只要rel=”external”就可以了

        支持 反对2

        • Denis 2010-06-07 16:16:25 #

          对啊,就是要手写 rel= “external”,我的代码什么都不需要,自动判别是否是外部连接啊!

          支持1 反对

    • akasuna 2010-08-18 16:16:57 #

      jQuery(document).delegate('a', 'click', function() {
      if ( this.href.indexOf( location.href.replace(location.pathname + location.search + location.hash, '') ) != 0 ) {
      window.open(this.href);
      return false;
      }
      });

      不知道这样行不行

      支持1 反对

  • neekey 2010-06-07 15:50:20 #

    不错啊,很有用 :smile:

    支持1 反对2

  • Justice 2010-06-07 22:24:36 #

    我不知道这样通过的 XHTML 验证有何意义..不写 target=”_blank” 就是为了让用户自己选择打开方式, 用 js 去加除了能骗骗 validator 以外没有意义啊.

    支持 反对2

    • Denis 2010-06-07 22:30:07 #

      我这篇文章的重点在于使用 jQuery 可以在新窗口打开外部链接,而不用每个链接都要添加 target 属性,这样非常方便,能够骗过 validator 或者只能说是额外的好处,而不是重点,这个好处你是否看重只是你个人的看法,如果你要吹毛求疵,我也没有办法!

      支持 反对

      • Justice 2010-06-07 23:00:10 #

        好吧, 我针对的只是为了骗过 XHTML validator 而这么做, 如果确实希望用户都在新窗口中打开, 无视 validator 我也是支持的, 用 js 去做也的确很简洁. 不过评论本来就是发表自己个人的看法, 我并不代表别人…如果你觉得发表一下反面的意见就是吹毛求疵, 那我也没办法…

        支持 反对

  • 柱子 2010-06-08 09:19:32 #

    用于wp的话,应该加在哪个模板文件里才能全站通用?

    支持 反对

  • 柱子 2010-06-08 13:23:00 #

    要加上rel=“nofollow” 应该如何添加?
    是不是.attr(“rel”,”nofollow”);

    支持 反对

    • Denis 2010-06-08 13:57:53 #

      应该是吧,但是通过 JS 加 nofollow 没有任何作用,搜索引擎基本还是不懂 JS 的!nofollow 要实实在在加上去的!

      支持2 反对

    • 柱子 2010-06-08 14:01:46 #

      用.attr(“rel”,”nofollow”);
      加了后,sidebar的友情链接被全部nofollow了,应该如何排除,演示ttxx.in

      支持 反对

      • Denis 2010-06-08 14:39:18 #

        这个你只能通过定义,给某个 DIV 下的 链接加 nofollow,详细你去查下 jQuery Selector 怎么使用了。 :mrgreen:

        支持 反对

  • 猪八戒 2010-06-09 20:52:21 #

    学习这个jquery中。

    支持 反对1

  • 分文网 2010-08-04 14:15:53 #

    怪了 为什么我按照介绍 添加了上述控制码 没有起作用

    支持 反对

  • 2010-12-29 22:14:25 #

    请问一下: 如果要不获取包含.swf的外链..要怎么写代码?

    也就是让外链中有.swf的不起作用…

    麻烦指点一下..谢谢!

    支持 反对

发表评论

你必须 登陆 之后才能留言。你可以使用以下方式快速登陆我爱水煮鱼:

使用新浪微博登陆 使用腾讯微博登陆 使用豆瓣登陆

你也可选择直接在本站 注册