JavaScriptを使って、どのブラウザかを判定するあれこれ

Javascript

JavaScript(以下JS)で実装するものが増えてきたのに伴い、古いブラウザを判定して処理を分けることもあります。

そういう実装のたびに調べてるのでメモしておこうと思います。

UserAgentで判定する

一番わかりやすい方法かと思いますが、UserAgentを取得してその文字列を見てどのブラウザか判別する方法です。

var userAgent = window.navigator.userAgent.toLowerCase();
var appVersion = window.navigator.appVersion.toLowerCase();

if (userAgent.indexOf('msie') != -1) {
    //IE全般
    if (appVersion.indexOf("msie 6.") != -1) {
        //IE6
    }else if (appVersion.indexOf("msie 7.") != -1) {
        //IE7
    }else if (appVersion.indexOf("msie 8.") != -1) {
        //IE8
    }else if (appVersion.indexOf("msie 9.") != -1) {
        //IE9
    }else if (appVersion.indexOf("msie 10.") != -1) {
        //IE10
    }
}else if (userAgent.indexOf('chrome') != -1) {
    //Chrome
}else if (userAgent.indexOf('safari') != -1) {
    //Safari
}else if (userAgent.indexOf('firefox') != -1) {
    //Firefox
}else if (userAgent.indexOf('opera') != -1) {
    //Opera
}

ブラウザがサポートしている機能で判定する

いろいろ調べている時に下記ページで見つけたのですが、ブラウザがサポートしている機能でブラウザ判別する方法です。

var _ua = (function(){
    return {
        ltIE6:typeof window.addEventListener == "undefined" && typeof document.documentElement.style.maxHeight == "undefined",
        ltIE7:typeof window.addEventListener == "undefined" && typeof document.querySelectorAll == "undefined",
        ltIE8:typeof window.addEventListener == "undefined" && typeof document.getElementsByClassName == "undefined",
        ltIE9:document.uniqueID && !window.matchMedia,
        gtIE10:document.uniqueID && document.documentMode >= 10,
        Trident:document.uniqueID,
        Gecko:window.sidebar,
        Presto:window.opera,
        Blink:window.chrome,
        Webkit:!window.chrome && typeof document.webkitIsFullScreen != undefined,
        Touch:typeof document.ontouchstart != "undefined",
        Mobile:typeof window.orientation != "undefined"
    }
})();

if(_ua.ltIE6){
    //IE6
}else if(_ua.ltIE7){
    //IE7
}else if(_ua.ltIE8){
    //IE8
}else if(_ua.ltIE9){
    //IE9
}else if(_ua.gtIE10){
    //IE10
}else if(_ua.Blink){
    //ChromeまたはBlink版Opera
}else if(_ua.Gecko){
    //Firefox
}else if(_ua.Presto){
   //旧Opera
}else if(_ua.Trident && !_ua.ltIE8){
    //IE9以上
}else if( (_ua.Trident && !_ua.ltIE9 ) || _ua.gtIE10){
    //IE10以上
}else if(_ua.Mobile){
    //スマートフォンやタブレット端末
}else if(_ua.Touch){
    //タッチデバイス
}else if(_ua.Touch && !_ua.Mobile){
    //デスクトップ版のタッチデバイス対応端末
}else if(_ua.Webkit){
    //safari
}

jQuery.supportで判別する

jQueryを使って判別する方法としてjQuery.supportというのがあります。こちらもブラウザがどの機能を使えるかで判定する方法です。

例:

if(!jQuery.support.opacity){
    //IE6~8で使う処理
}

一個上のjQueryを使わない版と違うところは、「jQuery.support.」の後のプロパティが決まっているところでしょうか。なので以下のページに説明がありますがこれだけだとIE6と7の区別はできないみたいです。

jQuery.browserで判別する

また別の方法でjQuery.browserを使って判定というのがあったのですが、jQuery1.3の時点で非推奨になっていて 1.9からは使うことも出来ませんので他のものを使いましょう。

if(jQuery.browser.msie){
    //IE
}else if(jQuery.browser.mozilla){
    //Firefox
}else if(jQuery.browser.webkit){
    //chrome or safari
}else if(jQuery.browser.opera){
    //opera
}

if(jQuery.browser.msie && parseInt(jQuery.browser.version) == 8){
    IE8
}else if(jQuery.browser.msie && parseInt(jQuery.browser.version) == 7){
    IE7
}else if(jQuery.browser.msie && parseInt(jQuery.browser.version) == 6){
    IE6
}

他の参考リンク