jQuery.support で厳密なブラウザ判定を行う

jQuery.support を使ってブラウザを判別すると、純粋にブラウザが備えた機能をベースとしてブラウザの判別を行えるので、UserAgentを偽装しているブラウザに対しても厳密なブラウザ判定が適応できる利点があります。
まずは、jQuery.supportはさまざまなエントリを持っているので、全エントリに対する最新ブラウザの対応状況を一覧化してみました。

	Firefox 3.x	Firefox 3.6	Firefox 4.x	Safari 4.x	Safari 5.x	Chrome 9.x	Chrome 10.x	Opera10.x	Opera11.x	IE6	IE7	IE8	IE9	Android 2.x	iOS
leadingWhitespace	TRUE	TRUE	TRUE	TRUE	TRUE	TRUE	TRUE	TRUE	TRUE	FALSE	FALSE	FALSE	TRUE	TRUE	TRUE
tbody	TRUE	TRUE	TRUE	TRUE	TRUE	TRUE	TRUE	TRUE	TRUE	FALSE	FALSE	TRUE	TRUE	TRUE	TRUE
htmlSerialize	TRUE	TRUE	TRUE	TRUE	TRUE	TRUE	TRUE	TRUE	TRUE	FALSE	FALSE	FALSE	TRUE	TRUE	TRUE
style	TRUE	TRUE	TRUE	TRUE	TRUE	TRUE	TRUE	TRUE	TRUE	FALSE	FALSE	FALSE	TRUE	TRUE	TRUE
hrefNormalized	TRUE	TRUE	TRUE	TRUE	TRUE	TRUE	TRUE	TRUE	TRUE	FALSE	FALSE	TRUE	TRUE	TRUE	TRUE
opacity	TRUE	TRUE	TRUE	TRUE	TRUE	TRUE	TRUE	TRUE	TRUE	FALSE	FALSE	FALSE	TRUE	TRUE	TRUE
cssFloat	TRUE	TRUE	TRUE	TRUE	TRUE	TRUE	TRUE	TRUE	TRUE	FALSE	FALSE	FALSE	TRUE	TRUE	TRUE
checkOn	TRUE	TRUE	TRUE	FALSE	FALSE	FALSE	FALSE	TRUE	TRUE	TRUE	TRUE	TRUE	TRUE	FALSE	FALSE
optSelected	TRUE	TRUE	TRUE	FALSE	TRUE	TRUE	TRUE	TRUE	TRUE	FALSE	FALSE	FALSE	FALSE	TRUE	TRUE
getSetAttribute	TRUE	TRUE	TRUE	TRUE	TRUE	TRUE	TRUE	TRUE	TRUE	FALSE	FALSE	TRUE	TRUE	TRUE	TRUE
submitBubbles	TRUE	TRUE	TRUE	TRUE	TRUE	TRUE	TRUE	TRUE	TRUE	FALSE	FALSE	FALSE	TRUE	TRUE	TRUE
changeBubbles	TRUE	TRUE	TRUE	TRUE	TRUE	TRUE	TRUE	TRUE	TRUE	FALSE	FALSE	FALSE	TRUE	TRUE	TRUE
focusinBubbles	FALSE	FALSE	FALSE	FALSE	FALSE	FALSE	FALSE	FALSE	TRUE	TRUE	TRUE	TRUE	TRUE	FALSE	FALSE
deleteExpando	TRUE	TRUE	TRUE	TRUE	TRUE	TRUE	TRUE	TRUE	TRUE	FALSE	FALSE	FALSE	TRUE	TRUE	TRUE
noCloneEvent	TRUE	TRUE	TRUE	TRUE	TRUE	TRUE	TRUE	TRUE	TRUE	FALSE	FALSE	FALSE	TRUE	TRUE	TRUE
inlineBlockNeedsLayout	FALSE	FALSE	FALSE	FALSE	FALSE	FALSE	FALSE	FALSE	FALSE	TRUE	TRUE	FALSE	FALSE	FALSE	FALSE
shrinkWrapBlocks	FALSE	FALSE	FALSE	FALSE	FALSE	FALSE	FALSE	FALSE	FALSE	TRUE	FALSE	FALSE	FALSE	FALSE	FALSE
reliableMarginRight	TRUE	TRUE	TRUE	FALSE	FALSE	FALSE	FALSE	TRUE	TRUE	TRUE	TRUE	TRUE	TRUE	FALSE	FALSE
noCloneChecked	TRUE	TRUE	TRUE	TRUE	TRUE	TRUE	TRUE	TRUE	TRUE	FALSE	FALSE	FALSE	FALSE	TRUE	TRUE
optDisabled	TRUE	TRUE	TRUE	FALSE	FALSE	TRUE	TRUE	TRUE	TRUE	TRUE	TRUE	TRUE	TRUE	FALSE	FALSE
radioValue	TRUE	TRUE	TRUE	TRUE	TRUE	TRUE	TRUE	FALSE	FALSE	FALSE	FALSE	FALSE	FALSE	TRUE	TRUE
checkClone	undefined	undefined	undefined	undefined	undefined	undefined	undefined	undefined	undefined	undefined	undefined	undefined	undefined	undefined	undefined
appendChecked	TRUE	TRUE	TRUE	TRUE	TRUE	TRUE	TRUE	TRUE	TRUE	FALSE	FALSE	TRUE	TRUE	TRUE	TRUE
boxModel	TRUE	TRUE	TRUE	TRUE	TRUE	TRUE	TRUE	TRUE	TRUE	TRUE	TRUE	TRUE	TRUE	TRUE	TRUE
reliableHiddenOffsets	TRUE	TRUE	TRUE	TRUE	TRUE	TRUE	TRUE	TRUE	TRUE	FALSE	FALSE	FALSE	TRUE	TRUE	TRUE
ajax	TRUE	TRUE	TRUE	TRUE	TRUE	TRUE	TRUE	TRUE	TRUE	TRUE	TRUE	TRUE	TRUE	TRUE	TRUE
cors	FALSE	TRUE	TRUE	TRUE	TRUE	TRUE	TRUE	FALSE	FALSE	FALSE	FALSE	FALSE	FALSE	TRUE	TRUE

エントリ表を元に、ブラウザ判定のスクリプトを書いてみた。

$(function(){
  var b_info = new Array();
  var chk_val = ""; // debug
  $.each($.support, function(key, val){
    b_info[key] = val;
    chk_val += key+"t"+val+"<br />n"; //debug
  });
  if(!b_info["noCloneChecked"]){ // is IE.
    if(b_info["appendChecked"]){
      browser = (b_info["reliableHiddenOffsets"]) ? "MSIE 9" : "MSIE 8"; // is IE9 or more / IE8.
    }else{
      browser = (b_info["shrinkWrapBlocks"]) ? "MSIE 6" : "MSIE 7"; // is IE6 or less / IE7.
    }
  }else{ // is not IE.
    if(!b_info["checkOn"]){ // is kind of WebKit.
      if(b_info["optDisabled"]){
        browser = "Chrome/"; // is Chrome 9 or more.
      }else{
        browser = (b_info["optSelected"]) ? "Safari/" : "Safari/4"; // is Safari 5 or more (AppleWebKit) / Safari 4 or less.
      }
    }else{ // is kind of Mozilla or Presto.
      if(b_info["radioValue"]){ // is Firefox.
        browser = (b_info["cors"]) ? "Firefox/" : "Firefox/3"; // is Firefox 3.6 or more / Firefox 3.0 or less.
      }else{ // is Opera.
        browser = (b_info["focusinBubbles"]) ? "Version/11" : "Version/10"; // is Opera 11 or more / Opera 10 or less.
      }
    }
  }
  var browser = (browser == "") ? "unknown" : browser;
  var result = "";
  // UserAgentと突合してBrowserバージョンを取得
  var ua = window.navigator.userAgent;
  if(ua.indexOf(browser) != -1){
    if(browser.indexOf("MSIE") != -1){
      browser_ver = browser.replace("MS", "") + ua.split(browser)[1].split(";")[0];
    }else{
      if(browser.indexOf("Version/") != -1){
        browser_ver = "Opera " + browser.split("Version/")[1] + ua.split(browser)[1].split(" ")[0];
      }else{
        if(browser.indexOf("Safari/") != -1){
          if(ua.indexOf("Android") != -1){
            browser_ver = "Android " + ua.split("Android ")[1].split(";")[0] + "(" + browser.replace("/", "") + " " + ua.split("Version/")[1].split(" ")[0] + ")";
          }else if(ua.indexOf("iPhone OS") != -1){
            browser_ver = "iOS " + ua.split("iPhone OS ")[1].split(" ")[0].replace("_", ".") + "(" + browser.replace("/", "") + " " + ua.split("Version/")[1].split(" ")[0] + ")";
          }else{
            browser_ver = browser.replace("/", "") + " " + ua.split("Version/")[1].split(" ")[0];
          }
        }else{
          browser_ver = browser.replace("/", "") + " " + ua.split(browser)[1].split(" ")[0];
        }
      }
    }
  }else{
    if(browser == "Version/10"){
      browser_ver = "Opera " + ua.split("/")[1].split(" ")[0];
    }else if(browser = "Safari/4"){
      browser_ver = browser.replace("/4", "") + " " + ua.split("Version/")[1].split(" ")[0];
    }else{
      browser_ver = "unknown";
    }
  }
  // result = (browser_ver != "unknown") ? browser_ver : false;
  // return result;
  result += ua + "<br />" + browser + " : " + browser_ver+"<br />"+chk_val; // debug
  $("body").html(result); // debug
});

jQuery.support で厳密なブラウザ判定を行う

Popular Articles

Author Profile