HTTPサーバーとWeb開発

90. Javascript によるブラウザの判別方法

Javascriptを用いたWeb画面の開発を行う際に、クロスブラウザ対応に
頭を悩ませている開発者の方も多いのではないだろうか?
Javascriptは Internet Explorer や Safari、Firefox などブラウザによって実装されている機能や
振る舞いが異なるため、

「IE では動作するのに Safari ではエラーがでてしまう。」

という現象が度々発生する。

このようなエラーを回避するため、各ブラウザごとに Javascript の処理を
振り分ける必要があるのだが、そのためには Javascript が実行されている
ブラウザやそのバージョンの判別を行わなければならない。

とはいえ実際のところ、Ajax や入力妥当性検査、画面内の動的な変更等に
Javascript を利用するだけであれば、「IE かそれ以外のブラウザ」を
判別して処理を振り分けるだけで十分なケースが多い、

「IE かそれ以外のブラウザ」を判別するのは実に簡単である。
次の一行だけで簡単に行うことができる。

IE='\v'=='v';

上記の一行をグローバル変数:IE として記述し、次のようにブラウザごとに
処理の振り分けに利用すればよい。

IE='\v'=='v';

function test(){
    :
    if(IE){
    // IE用の処理
    }else{
    // それ以外のブラウザ用の処理
    }
    :
}
【 ブラウザ判別のサンプル 】

ボタンをクリックするとブラウザの判別を行い、アラートダイアログが表示されます。

【 その他のブラウザ判別方法 】

「IEかそれ以外のブラウザ」の判別だけで十分と述べたが、より詳細なブラウザの
判別を行いたい場合もあるだろう。
詳細な判別には、次の記述によってブラウザのユーザエージェント名を参照すればよい。

navigator.userAgent

userAgent にはブラウザのエンジン名が返されるので、内容に含まれる文字列の
MSIESafari 等によってそれぞれの処理を分岐してやればよい。

【 ユーザエージェント取得のサンプル 】

ボタンをクリックするとブラウザのユーザーエージェントとブラウザ名が表示されます。