JavaScript の基本コード

ブラウザ判定

IEは、いまだに IE6 から IE11 まで存在し、目的によっては細分してそれぞれのバージョンの考慮が必要な場合があります。

特に、見栄えでは大きな違いが出るので、JavaScript で STYLE 定義を document.write する場合に役に立つと思います。

以下は、String オブジェクトのメソッドとして実装しています。"chrome".browser() が true ならば、Google Chrome という事になります。IE では、個別に "ie10".browser() で判定できますが、IE 全体での判定は "ie".browser() になります。

※ 無駄にみえるコード部分がありますが、firefox から safari までの並びは意味があります。

<script type="text/javascript">

String.prototype.browser = function() {
	var userAgent = window.navigator.userAgent.toLowerCase();
	var appVersion = window.navigator.appVersion.toLowerCase();
	var target = this.valueOf();

	if (userAgent.indexOf("msie") > -1) {
		if (appVersion.indexOf("msie 6.0") > -1) {
			return ( target == "ie6" || target == "ie" );
		}
		else if (appVersion.indexOf("msie 7.0") > -1) {
			return ( target == "ie7" || target == "ie" );
		}
		else if (appVersion.indexOf("msie 8.0") > -1) {
			return ( target == "ie8" || target == "ie" );
		}
		else if (appVersion.indexOf("msie 9.0") > -1) {
			return ( target == "ie9" || target == "ie" );
		}
		else if (appVersion.indexOf("msie 10.0") > -1) {
			return ( target == "ie10" || target == "ie" );
		}
		else {
			return false;
		}
	}
	else if (userAgent.indexOf("trident/7.0") > -1) {
		return ( target == "ie11" || target == "ie" );
	}
	else if (userAgent.indexOf("firefox") > -1) {
		return ( target == "firefox" );
	}
	else if (userAgent.indexOf("opera") > -1) {
		return ( target == "opera" );
	}
	else if (userAgent.indexOf("chrome") > -1) {
		return ( target == "chrome" );
	}
	else if (userAgent.indexOf("safari") > -1) {
		return ( target == "safari" );
	}
	else {
		return false;
	}
}
</script>
<select id="browser">
	<option value="chrome">chrome
	</oprion>
	<option value="firefox">firefox
	</oprion>
	<option value="opera">opera
	</oprion>
	<option value="safari">safari
	</oprion>
	<option value="ie11">ie11
	</oprion>
	<option value="ie10">ie10
	</oprion>
	<option value="ie9">ie9
	</oprion>
	<option value="ie8">ie8
	</oprion>
	<option value="ie7">ie7
	</oprion>
	<option value="ie6">ie6
	</oprion>
	<option value="ie">ie
	</oprion>
</select>
<input type=button
	value="ブラウザ判定"
	onclick='alert((document.getElementById("browser").value).browser())'>

以下は、コードの基本部分のテスト用のコードです

<SCRIPT type="text/javascript">

	var userAgent = window.navigator.userAgent.toLowerCase();
	var appVersion = window.navigator.appVersion.toLowerCase();

	if (userAgent.indexOf("msie") > -1) {
		if (appVersion.indexOf("msie 6.0") > -1) {
			alert("IE6");
		}
		else if (appVersion.indexOf("msie 7.0") > -1) {
			alert("IE7");
		}
		else if (appVersion.indexOf("msie 8.0") > -1) {
			alert("IE8");
		}
		else if (appVersion.indexOf("msie 9.0") > -1) {
			alert("IE9");
		}
		else if (appVersion.indexOf("msie 10.0") > -1) {
			alert("IE10");
		}
		else {
			alert("Unknown");
		}
	}
	else if (userAgent.indexOf("trident/7.0") > -1) {
		alert("IE11");
	}
	else if (userAgent.indexOf("firefox") > -1) {
		alert("Firefox");
	}
	else if (userAgent.indexOf("opera") > -1) {
		alert("Opera");
	}
	else if (userAgent.indexOf("chrome") > -1) {
		alert("Google Chrome");
	}
	else if (userAgent.indexOf("safari") > -1) {
		alert("Safari");
	}
	else {
		alert("Unknown");
	}

</SCRIPT>

IE11 の互換性の変更点
IE11 に変わって、互換性 ("compatible")トークンとブラウザー("MSIE") トークンが削除されました。よって、IE としてのブラウザの判定は少し複雑になっています。