JavaScriptでIEを判定する方法をサンプルコード解説!

JavaScriptでIEを判定する方法をサンプルコード付きで解説します。IEかどうかの判定やバージョンの取得、互換モードかどうかまで判定する関数を紹介します。

コンテンツ [表示]

  1. 1JavaScriptでIEを判定したい
  2. 2JavaScriptでIEを判定する方法
  3. 2.1IEを判定するコード
  4. 2.2実行結果
  5. 2.3まとめ

JavaScriptでIEを判定したい

JavaScriptでアクセスしてきているブラウザがIE(Interner Explorer)かどうかを判定したい時があります。

例えばIEはCSSやJavaScriptでも動かないプロパティなどがあり、CSSハックやJavaScriptでもIEだけ処理を分けたい場合に、IEを判定する必要があります。
(やっかいな事にIEでもバージョン毎に分けたいケースもあります)

今回はJavaScriptでIEの判定とIEのバージョンを取得する方法をサンプルコード付きで紹介していきます。

Photo byfancycrave1

JavaScriptでIEを判定する方法

IEを判定するにはJavaScriptでユーザーエージェントを取得し、その文字列からIEかどうかを判定します。下記のサンプルコードを見てみましょう。

IEを判定するコード

IEかどうか判定するコード

function IeVersion() {
    //Set defaults
    var value = {
		IsIE: false,
		IsEdge: false,
		EdgeHtmlVersion: 0,
		TrueVersion: 0,
		ActingVersion: 0,
		CompatibilityMode: false
	};

	//Try to find the Trident version number
	var trident = navigator.userAgent.match(/Trident\/(\d+)/);
	if (trident) {
		value.IsIE = true;
		//Convert from the Trident version number to the IE version number
		value.TrueVersion = parseInt(trident[1], 10) + 4;
	}

	//Try to find the MSIE number
	var msie = navigator.userAgent.match(/MSIE (\d+)/);
	if (msie) {
	    value.IsIE = true;
        	//Find the IE version number from the user agent string
		value.ActingVersion = parseInt(msie[1]);
	} else {
		//Must be IE 11 in "edge" mode
		value.ActingVersion = value.TrueVersion;
	}

	//If we have both a Trident and MSIE version number, see if they're different
	if (value.IsIE && value.TrueVersion > 0 && value.ActingVersion > 0) {
		//In compatibility mode if the trident number doesn't match up with the MSIE number
		value.CompatibilityMode = value.TrueVersion != value.ActingVersion;
	}
	
	//Try to find Edge and the EdgeHTML vesion number
	var edge = navigator.userAgent.match(/Edge\/(\d+\.\d+)$/);
	if (edge)
	{
		value.IsEdge = true;
		value.EdgeHtmlVersion = edge[1];
	}
	return value;
}

こちらのコードは下記のリポジトリのコードを参考にしています。

GitHub - Gavin-Paolucci-Kleinow/ie-truth: JavaScript function to detect true IE version and compatibility mode IE is running in
JavaScript function to detect true IE version and compatibility mode IE is running in - Gavin-Paolucci-Kleinow/ie-truth

実行結果

IE・Edgeやその他のブラウザの上記の関数の結果をご紹介します。

IE6

IE6

IE7

IE7

IE8

IE8

IE9

IE9

IE10

IE10

IE11

IE11

Edge

Edge

IE・Edge以外

IE・Edge以外のブラウザ

まとめ

このようにIeVersionの関数を使うことで、IEのチェック、バージョンの確認や互換モードかどうかまで判定することが出来ます。

この関数で取得できる値で、IEのバージョンの分岐は大概は可能になるかと思います。ぜひ参考にしてみて下さい。

GeekHive採用サイト

関連記事