ブラウザの違いを細かく判別する


動作ブラウザ 【 IE:3.0  NN:2.0
Internet Explorer Netscape Navigator DreamPassport iCab
3.0x 4.0x 4.5 5.0x 5.5 2.0x 3.0x 4.0x 4.x 6.0 2 3 2.x
Windows - - -
Macintosh - - -
UNIX - - - - - - - -
Dreamcast - - - - - - - - - - -

ポイント aName = navigator.appName.toUpperCase(); appVer = navigator.appVersion; uAgent = navigator.userAgent.toUpperCase();
説  明 ブラウザ名やOS名、バージョンなどを判別するにはnavigatorオブジェクトのuserAgent、appName、appVersionを取得します。取得したuserAgentの文字列からブラウザとOS名を検索します。NN6のようにバージョン6でありながらバージョン5を返すものもあります。このため取得したバージョンと現実のバージョンが一致しないことになります。このためNN6の場合は取得したバージョンに1を加算します。
サンプル <html> <head> <title>最初にブラウザの違いを細かく判別する</title> <script Language="JavaScript"><!-- // Netscape Navigator -> Netscape // Internet Explorer -> Explorer function getBrowserName() { var aName = navigator.appName.toUpperCase(); var uName = navigator.userAgent.toUpperCase(); if (aName.indexOf("NETSCAPE") >= 0) return "Netscape"; if (aName.indexOf("MICROSOFT") >= 0) return "Explorer"; return ""; } // ブラウザバージョン取得 function getBrowserVersion() { var browser = getBrowserName(); var version = 0; var s = 0; var e = 0; var appVer = navigator.appVersion; if (browser == "Netscape") { s = appVer.indexOf(" ",0); version = eval(appVer.substring(0,s)); if (version >= 5) version++; } if (browser == "Explorer") { appVer = navigator.userAgent; s = appVer.indexOf("MSIE ",0) + 5; e = appVer.indexOf(";",s); version = eval(appVer.substring(s,e)); } return version; } // Macintosh  -> MacOS // Windows95/98/NT/2000 -> Windows // UNIX -> UNIX function getOSType() { var RetCode = ""; var uAgent = navigator.userAgent.toUpperCase(); if (uAgent.indexOf("MAC") >= 0) RetCode = "MacOS"; if (uAgent.indexOf("WIN") >= 0) RetCode = "Windows"; if (uAgent.indexOf("X11") >= 0) RetCode = "UNIX"; return RetCode; } // --></script> </head> <body> ブラウザ: <script language="JavaScript"><!-- document.write(getBrowserName()," <b>",getBrowserVersion(),"</b>"); document.write(" [",getOSType()," ]"); // --></script> </body> </html>
補足説明 新しいブラウザやOSのバージョンアップにより期待通りに動作しない可能性もあります。新しいブラウザやOSが出たらuserAgentを調べて動作確認するようにする必要があります。別の方法としてSSI (Server Side Include)やCGIを使ってブラウザを判別する事も可能です。

■サンプルスクリプトを実行する >>実行
■各ブラウザでの動作結果を見る >>View!

写真素材 PIXTA