Hatena::ブログ(Diary)

on the center line.

2008-07-23

JavaScriptでブラウザの判別(各種JavaScriptライブラリの判定方法を抜粋)

| 09:52

JavaScriptライブラリを使わずに開発しているときに、ブラウザの判定をするのって意外と悩むので、調べた結果をまとめておきます。Prototype.jsJQuery、MooTools、Dojo について調べました。

Prototype.js の場合

  Browser: {
    IE:     !!(window.attachEvent && !window.opera),
    Opera:  !!window.opera,
    WebKit: navigator.userAgent.indexOf('AppleWebKit/') > -1,
    Gecko:  navigator.userAgent.indexOf('Gecko') > -1 && navigator.userAgent.indexOf('KHTML') == -1,
    MobileSafari: !!navigator.userAgent.match(/Apple.*Mobile.*Safari/)
  },

JQuery の場合

var userAgent = navigator.userAgent.toLowerCase();

jQuery.browser = {
	version: (userAgent.match( /.+(?:rv|it|ra|ie)[\/: ]([\d.]+)/ ) || [])[1],
	safari: /webkit/.test( userAgent ),
	opera: /opera/.test( userAgent ),
	msie: /msie/.test( userAgent ) && !/opera/.test( userAgent ),
	mozilla: /mozilla/.test( userAgent ) && !/(compatible|webkit)/.test( userAgent )
};

●MooTools の場合

var Browser = new Hash({
  Engine: {name: 'unknown', version: ''},
  Platform: {name: (navigator.platform.match(/mac|win|linux/i) || 
                    ['other'])[0].toLowerCase()},
  Features: {xpath: !!(document.evaluate), air: !!(window.runtime)},
  Plugins: {}
});

if (window.opera)
  Browser.Engine = {name: 'presto', version: (document.getElementsByClassName) ? 950 : 925};
else if (window.ActiveXObject)
  Browser.Engine = {name: 'trident', version: (window.XMLHttpRequest) ? 5 : 4};
else if (!navigator.taintEnabled)
  Browser.Engine = {name: 'webkit', version: (Browser.Features.xpath) ? 420 : 419};
else if (document.getBoxObjectFor != null)
  Browser.Engine = {name: 'gecko', version: (document.getElementsByClassName) ? 19 : 18};
Browser.Engine[Browser.Engine.name] = Browser.Engine[Browser.Engine.name + Browser.Engine.version] = true;

Dojo の場合

var dua = navigator.userAgent;
var dav = navigator.appVersion;
var tv = parseFloat(dav);

d.isOpera = (dua.indexOf("Opera") >= 0) ? tv : 0;

var idx = Math.max(dav.indexOf("WebKit"), dav.indexOf("Safari"), 0);
if(idx) {
  d.isSafari = 
    parseFloat(dav.split("Version/")[1]) || 
    ( ( parseFloat(dav.substr(idx+7)) >= 419.3 ) ? 3 : 2 ) || 2;
}
d.isAIR = (dua.indexOf("AdobeAIR") >= 0) ? 1 : 0;
d.isKhtml = (dav.indexOf("Konqueror") >= 0 || d.isSafari) ? tv : 0;
d.isMozilla = d.isMoz = (dua.indexOf("Gecko") >= 0 && !d.isKhtml) ? tv : 0;
d.isFF = d.isIE = 0;
if (d.isMoz) {
  d.isFF = parseFloat(dua.split("Firefox/")[1]) || 0;
}
if (document.all && !d.isOpera) {
  d.isIE = parseFloat(dav.split("MSIE ")[1]) || 0;
}

Prototype.jsJQueryはわりとシンプルな判定方法を使っているのに対し、Dojoはだいぶ複雑ですね。その代わりDojoでは、isMoz、isFFが区別できたり、isKhtml、isAIRなんてのがあったり、そもそもブラウザの判別がtrue/falseの2択ではなくてバージョン番号までわかったりと、かなり高機能になってます。

ま、用途に応じて使い分けましょう、と。