jnobuyukiのブログ

研究していて困ったことやその解決に関するメモ。同じように困ったあなたのために。twitter ID: @j_nobuyuki

Javascriptでブラウザの判別

Chrome HTML5 JavaScript

今回は、クロスブラウザ対応（異なるブラウザで動作や表示をそろえること）に向けて、JavaScriptで使用中のブラウザを調べる方法をまとめておきます。

ブラウザごとにJavaScriptの動作や表示が違うのはなぜ？

ブラウザはそれぞれ異なるJavaScriptエンジンが組み込まれています*1。

なので、各エンジンによって対応しない関数などがあったり、変数が異なったりということがあります。これらをうまく調整するとクロスブラウザ対応できるというわけです。

どこでブラウザ間の違いを見つけるか？

いろいろなやり方があるようですが、今回はuserAgentという変数で判別する方法を使います。
以下のコードを実行すると、ブラウザごとに異なる値が戻ってきます。

var userAgent = window.navigator.userAgent;
InternetExplorer11.0.9600.17280の場合

Mozilla/5.0 (Windows NT 6.1; WOW64; Trident/7.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; MDDC; .NET4.0C; .NET4.0E; rv:11.0) like Gecko

Chrome 37.0.2062.124 mの場合

Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/37.0.2062.124 Safari/537.36

Firefox32.0.3の場合

Mozilla/5.0 (Windows NT 6.1; WOW64; rv:32.0) Gecko/20100101 Firefox/32.0

ChromeならChrome、FirefoxならFirefoxという文字列が含まれているので、これを検出します。IE11にはIEという文字列は出てきませんが*2、Tridentという文字列が使えるようです*3。

判別用スクリプト

文字列の内部に任意の文字列が含まれるかを判定するには、indexOf()が使えます。

//userAgentを取得
var userAgent = window.navigator.userAgent;

//ブラウザを判定
if (userAgent.indexOf("Chrome") != -1) {
  //Chrome
} else if (userAgent.indexOf("Firefox") != -1) {
  //Firefox
} else if (userAgent.indexOf("Trident") != -1) {
  //IE11
} else if (userAgent.indexOf("MSIE") != -1) {
  //IE 6 - 10
} else {
  //other
}

*1:詳しくは List of ECMAScript engines - Wikipedia, the free encyclopedia

*2:IE10まではMSIEという文字列が含まれていたようです

*3:こちらのページを参照してください。 javaScriptで対応ブラウザ判定 - Qiita