在网站外部链接旁边添加Favorite Icons的方法,基于MooTools or jQuery

最近,我碰见了一个如何检索页面上所有的外部链接的jQuery文章,很有意思。对于我来说,我很喜欢收藏一些很酷的网站,并且分类罗列出来,以方便以后使用,如果在链接地址的旁边配有这些网站的 favorite icon,那就更美了。From Liviu Holhoş 实现了此功能,我选择了不同的方法,使用CSS的background-image属性,设置为背景图片也是不错的办法。
此案例我是分别用 jQuery 和MooTools 库实现的。


mootools-or-jquery-favicon

原案例:The jQuery JavaScript

1
2
3
4
5
6
7
8
9
10
11
12
13
jQuery('a[href^="http://"]').filter(function(){
     return this.hostname && this.hostname !== location.hostname;
}).each(function() {
    var link = jQuery(this);
    var faviconURL =link.attr('href').replace(/^(http:\/\/[^\/]+).*$/, '$1')+'/favicon.ico';
    var faviconIMG = jQuery('<img src="favicon.png" alt="" />')['appendTo'](link);
    var extImg = new Image();
    extImg.src = faviconURL;
    if (extImg.complete)
      faviconIMG.attr('src', faviconURL);
    else
      extImg.onload = function() { faviconIMG.attr('src', faviconURL); };
});

原案例来自:From Liviu Holhoş – Blog

教程网址:http://blog.liviuholhos.com/javascript/add-a-favicon-near-external-links-with-jquery

简化过的案例:The jQuery JavaScript

1
2
3
4
5
6
7
8
9
10
11
jQuery(function($) {
   $('a[href^="http://"]').filter(function(){												  
       return this.hostname && this.hostname !== window.location.hostname;
   }).each(function(){
	   var link = $(this);	
       /* get the favicon */
	   var faviconURL =link.attr('href').replace(/^(http:\/\/[^\/]+).*$/, '$1')+'/favicon.ico';
       /* place it in the anchor */
	   link.css('background-image','url(' + faviconURL + ')').addClass('favicon');
   }); 	
});

简化过的案例:The MooTools JavaScript

1
2
3
4
5
6
7
8
9
10
11
12
window.addEvent('domready',function() {
	/* 获得所有完整的linked anchors */
	$$('a[href^="http://"]').each(function(a) {
		/* 如果不是在blog.moocss.com domain内,就执行以下操作*/
		if(!a.get('href').contains(location.host)) {
			/* get the favicon */
			var favicon = a.get('href').replace(/^(http:\/\/[^\/]+).*$/, '$1') + '/favicon.ico';
			/* place it in the anchor */
			a.setStyle('background-image','url(' + favicon + ')').addClass('favicon');
		}
	});
});

The CSS

<style>
.favicon { background-repeat:no-repeat; padding:2px 0 3px 22px; }
</style>

The HTML

1
2
3
4
5
6
7
8
9
10
<ul>
    <li><a href="http://blog.moocss.com/">blog.moocss.com</a></li>	
    <li><a href="http://davidwalsh.name/">davidwalsh.name</a></li>
    <li><a href="http://css-tricks.com/">css-tricks.com</a></li>
    <li><a href="http://google.com/">google.com</a></li>
    <li><a href="http://mootools.net/">mootools.net</a></li>
    <li><a href="http://jquery.com/">jquery.com</a></li>
    <li><a href="http://mozilla.com/">mozilla.com</a></li>
    <li><a href="http://digg.com/">digg.com</a></li>
</ul>

综合演示

演示:Demo

站点统计