prototype.js でブラウザの種類を知る為の簡単な拡張。

prototype.js の実装は、Google の 『Google Hosted Libraries』を使うのが簡単です。

Prototype.Browser のプロパティには、それぞれブラウザを示す名前が定義されていて、現在のブラウザには true がセットされているので、以下のようにすると文字列で『現在のブラウザ』を取得する事ができます。

<script src="//ajax.googleapis.com/ajax/libs/prototype/1.7.1.0/prototype.js"></script>
<script type="text/javascript">
Prototype.Browser.current = (function() {
	for( var bt in Prototype.Browser ) {
		if ( Prototype.Browser[bt] ) {
			return bt;
		}
	}
	return "unknown";
})();

console.log(Prototype.Browser.current)

</script>

実際問題このような拡張をする必要は無いのですが、JavaScript のオブジェクトを知る上では簡単なサンプルです。このような考え方で、他のライブラリも拡張や変更できる場合があります。

ブラウザ判定だけが欲しい場合

以下は、prototype.js のオリジナルの 『Browserプロパティ』の内容ですが、prototype.js を使わなくてもブラウザ判定の処理が欲しい場合はこの部分だけをそのまま持って来ればいいと思います。

Browser: (function(){
    var ua = navigator.userAgent;
    var isOpera = Object.prototype.toString.call(window.opera) == '[object Opera]';
    return {
      IE:             !!window.attachEvent && !isOpera,
      Opera:          isOpera,
      WebKit:         ua.indexOf('AppleWebKit/') > -1,
      Gecko:          ua.indexOf('Gecko') > -1 && ua.indexOf('KHTML') === -1,
      MobileSafari:   /Apple.*Mobile/.test(ua)
    }
  })()

▲ JavaScript文法としては、ソースコードからそのまま取って来たので多少の修正は必要です。

prototype.js

prototype.js (1.7.2) : Browser プロパティ

prototype.js でクロスドメインの Ajax の読み込みテスト

prototype.js で使っていたのをさらに短縮した IE かどうかの判断。

Google の prototype.js を使う

prototype.js 内の getElementsByName の代わりになるメソッド

prototype.js : $ 関数

prototype.js : 1.6.1と1.7_rc2 の evalJSON の違い

JavaScript : prototype.js(1.6.1) の Try.these と XMLHttpRequest

prototype.js の Object.extend でプロパティを追加する

prototype.js で、$(id) 関数が name 属性のみの場合 IE 以外で使え無いのをとりあえず使えるようにする