JavaScriptでブラウザの判別(各種JavaScriptライブラリの判定方法を抜粋)
JavaScriptのライブラリを使わずに開発しているときに、ブラウザの判定をするのって意外と悩むので、調べた結果をまとめておきます。Prototype.js、JQuery、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.js、JQueryはわりとシンプルな判定方法を使っているのに対し、Dojoはだいぶ複雑ですね。その代わりDojoでは、isMoz、isFFが区別できたり、isKhtml、isAIRなんてのがあったり、そもそもブラウザの判別がtrue/falseの2択ではなくてバージョン番号までわかったりと、かなり高機能になってます。
ま、用途に応じて使い分けましょう、と。