2007-07-05

Favicon Plugin for jQuery 1.1.2

指定した URL からそのサイトの favicon (ファビコン) を表示する jQuery プラグインです。サイトによって favicon があったりなかったりしますが、Favicon Plugin は favicon が見つかったときだけ表示するようにしています。

http:// からはじまる任意の URL を指定できます。その URL からプロトコルとホスト名を切り出して favicon.ico の URL を組み立てます。ですので、相対パスは対応していません。

Favicon Plugin は img タグを操作することを前提としています。favicon.ico の URL を設定し、そのサイズを 16 × 16 としています。

はじめは非表示としておき favicon のロードが完了したとき表示するようにしています。これで favicon のないサイトは img タグが [×] などにならずに済みます。イベントのハンドリングは jQuery の one メソッドを使っています。one メソッドを使うと onload イベントの発生後、そのイベントハンドラを解除してくれます。bind メソッドの1度きり版ですね。

Favicon Plugin for jQuery 1.1.2
/*
* Favicon Plugin for jQuery 1.1.2
*
* Copyright(C) 2007 LEARNING RESOURCE LAB.
* http://postal-search-apis-and-solutions.blogspot.com/
*
* Dual licensed under the MIT (MIT-LICENSE.txt)
* and GPL (GPL-LICENSE.txt) licenses.
*/
(function($) {

// favicon
$.fn.favicon = function(url) {
var self = this;
var dir = url.split('/').splice(0, 3).join('/');
// http://example.com/foo.html -> http://example.com

self.hide();
self.attr('width', 16);
self.attr('height', 16);
self.attr('src', dir + '/favicon.ico');
self.one('load', function() {
self.show();
});

return self;
};

})(jQuery); // function($)
次の例のように Favicon Plugin は img タグを操作します。favicon メソッドに URL を指定すると http://weather.goo.ne.jp/favicon.ico を表示します。
<div id="r1"></div>

<script type="text/javascript">
//<![CDATA[
jQuery(function($) {
$('<img />')
.favicon('http://weather.goo.ne.jp/area/4410.html')
.appendTo('#r1');
});
//]]>
</script>
次の例は HTML ページの全 a タグを探し、その a タグのリンク先の favicon を表示しています。favicon は insertBefore メソッドを使って a タグの直前に追加しています。
<script type="text/javascript">
//<![CDATA[
jQuery(function($) {
$('a').each(function(i, n) {
$('<img />')
.favicon(n.href)
.insertBefore(n);
});
});
//]]>
</script>
Favicon Plugin は jQuery の振る舞いを理解する目的で作成したものですが、特定の場面でニーズがあるかもしれませんので公開します。ライセンスは jQuery と同じにしておきます。

Learning  jQuery: Better Interaction Design and Web Development With Simple Javascript TechniquesLearning jQuery: Better Interaction Design and Web Development With Simple Javascript Techniques
Jonathan Chaffer Karl Swedberg

Jquery Reference Guide Jquery in Action 2ちゃんねるはなぜ潰れないのか? (扶桑社新書 14) デザイニング・インターフェース ―パターンによる実践的インタラクションデザイン 初めてのJavaScript―Ajax&DOM対応

by G-Tools

0 件のコメント: