jstarted.com
JavaScript/HTML/CSSのノウハウや覚書を掲載するブログ
2012.12.21

ie6,7,8とその他のブラウザを判別する

Category:

javascriptの旧IEでの動作保証は使用できないメソッドが多々あるなどして、html+cssのコーディングよりもずっとしんどいということが、僕にもやっと理解できるようになりました。

業務ではIE6以上の動作保証を行うことがまだ多々ありますが、IE6、7、8とそれ以外とで動き方が異なるというケースが目立つように思います。特にIEはバージョン違いでかなり言うことを聞いてくれなくなるので、細かいバージョン判別を行いたいときがあります。そういうときに使える条件分岐を書いてみました。

var ua = navigator.userAgent;
var ie_version;

if(ua.match(/MSIE/) === null) {
	document.write("これはIEじゃないです。");
} else {
	ie_version = ua.match(/MSIE../);//matchメソッドでMSIE部分を抽出
	ie_version = ie_version[0].replace("MSIE ","") * 1;//IEをバージョン数だけにして数値化
	
	//ieのバージョン毎に挙動を分岐
	if(ie_version <= 6) {
		document.write("これはIE6か、それ以下のバージョンです。");
	} else if(ie_version == 7) {
		document.write("これはIE7です。");
	} else if(ie_version == 8) {
		document.write("これはIE8です。");
	} else {
		document.write("これはIE9か、それ以上のバージョンです。");
	}
}

動作サンプルはこちら
ie6-8とその他のブラウザを判別する - js do it

UAの取得までは簡単に済みましたが、思いがけないところで苦戦したのがmatch()メソッド。googleの検索で引っかかるページの一部には、matchを使って返す値が文字列だと書いてあるところもありましたが実際に返ってくるのは配列で、その点に気づくのに少し時間がかかりました。条件分岐をIEのバージョンの数値で行なってみたかったので、matchで取得した配列を文字列化、数値化することにしましたが、型変換は今まであまり意識せずに済んできていたので、勉強しなおす良いきっかけになりました。

jstarted.comはamazon.co.jpを宣伝しリンクすることによってサイトが紹介料を
獲得できる手段を提供することを目的に設定されたアフィリエイト宣伝プログラムである、
Amazonアソシエイト・プログラムの参加者です。

クリエイティブ・コモンズ・ライセンス
jstarted.com by yoichi kobayashi is licensed under a Creative Commons 表示 3.0 非移植 License.