网站开发日志: jQuery自动识别外链接

每个网站多多少少都会有一些外链接。（题外：我的博客开通时间不长，还没开始和别人交换链接。如果有兴趣，请和我联系！）Web2.0时代，网站的外链接一般都会加上一个外链接的图标。本文将介绍如何借助jQuery来自动识别页面上的外链接，并且给外链接加上图标。你或许会有疑问：如果一个页面有许多的外链接（比如www.61dh.com这样一个少儿网址站），这么做会造成整个页面都是外链接图标。不用担心，本文介绍的方法，可以识别特定区域的外链接。

首先，让我们看看如何用Javascript来判断域名。比如你访问的页面网址为：http://www.61dh.com/blog/，使用下面Javascript语句，将得到：www.61dh.com；但是如果你访问的页面网址是http://61dh.com/blog/，使用下面的Javascript语句，将得到：61dh.com。

var hname = location.hostname;
//把该语句插入HTML文档的<head>,你将得到该页面的域名

知道了当前页的域名后，我们可以通过比较页面内链接的域名和当前页的域名来判断该链接是否为外链接，同时我们还要判断当前连接是否含有域名，这样就可以排除mailto类型的链接。

接下来，要用到jQuery的过滤（filter）函数，比如：你要识别外链的区域ID为“sidebar”，你可以通过过滤函数以及上面的识别外联的方法把外联滤出，然后用jQuery的‘after’函数把外链图标加上。具体代码如下：

$(document).ready(function() {
  $('#sidebar a').filter(function() {
	return this.hostname && this.hostname !== location.hostname;
  }).after(' <img src="/images/external.png" alt="external link">');
});

注意：使用以上代码，#sidebar区域内的链接包括图片链接，都会被加上外链图标。如果你不想在图片链接上再加入外链图标，你可以对代码稍作修改，如下：

$(document).ready(function() {
  $('#sidebar a:not(has(img))').filter(function() {
	return this.hostname && this.hostname !== location.hostname;
  }).after(' <img src="/images/external.png" alt="external link">');
});
//#sidebar a:not(has(img))指的#sidebar区域内非图片链接

最后还有一个非常重要的提示，假设一个页面的站内链接用的是绝对路径，例如：<a href="http://www.61dh.com/blog/2008/10/10.html">10大最吃香的网站开发技术</a>。 当你访问该页面用的是http://61dh.com时, 你会发现，location.hostname（61dh.com） !== this.hostname（www.61dh.com），从而造成误判断。解决办法是通过字符串匹配，来确保hostname总是包含www。具体代码如下：

$(document).ready(function() {
  var phost = location.hostname; //页面主机名
  if (!phost.match("^www")){
  	phost = "www\."+phost;
  }
  $('#sidebar a:not(:has(img))').filter(function() {
    var lhost = this.hostname; //链接主机名
    if (lhost && !lhost.match("^www")){
  	lhost = "www\."+lhost;
    } 
    return lhost && lhost !== phost;
  }).after(' <img src="/images/external.png" alt="external link">');
});

演示：www.61dh.com/blog 见右侧栏里的~~蓝色外链标签~~ (updated: 图标被改成灰色）

补充：(1/8/2009)

我在右侧栏加入了友情链接 - 注意“灰色外链接图标”

标签： Javascript, Jquery

jQuery自动识别外链接

2 条评论:

发表评论

指向此帖子的链接:

关于

上一个

jQuery自动识别外链接

相关文章:

2 条评论:

发表评论

指向此帖子的链接:

关于

上一个