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