SQLの窓 イラストAC フリー素材

2017年11月10日

ブラウザ判定 : String.prototype.browser に登録して、文字列と実際のブラウザが一致したら true を返す



特定のブラウザの処理を行いたいときに使用するといいと思います
if ( "ie".browser() ) {
	// IE の処理
} 
Edge や Safari のテストは、Google Chrome の スマホエミュレータで、Microsoft LumiaiPhone を選ぶといいです。
<script>
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 ( target == "ie" );
		}
	}
	else if (userAgent.indexOf("trident/7.0") > -1) {
		return ( target == "ie11" || target == "ie" );
	}
	else if (userAgent.indexOf("edge") > -1) {
		return ( target == "edge" );
	}
	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;
	}
}

$(function(){
	$("#browser_check,#browser_check td")
		.css({ 
			"border-collapse": "collapse", 
			"border": "1px solid #444444",
			"padding": "10px"
		 });

	$("#browser_check tr").each(function(idx){

		if ( idx == 0 ) {
			$(this).find("td").each( function(){
				$(this).text( $(this).prop("id") );
			} );
		}
		else {
			$(this).find("td").each( function(){
				if ( $(this).prop("id").replace("_","").browser() ) {
					$(this)
						.text("当たり")
						.css({"background-color": "pink"})
						;
				}
			} );
		}

	});

});
</script>
<table id="browser_check">
<tr>
	<td id="ie6"></td>
	<td id="ie7"></td>
	<td id="ie8"></td>
	<td id="ie9"></td>
	<td id="ie10"></td>
	<td id="ie11"></td>
	<td id="ie"></td>
	<td id="edge"></td>
	<td id="chrome"></td>
	<td id="firefox"></td>
	<td id="opera"></td>
	<td id="safari"></td>
</tr>
<tr>
	<td id="ie6_"></td>
	<td id="ie7_"></td>
	<td id="ie8_"></td>
	<td id="ie9_"></td>
	<td id="ie10_"></td>
	<td id="ie11_"></td>
	<td id="ie_"></td>
	<td id="edge_"></td>
	<td id="chrome_"></td>
	<td id="firefox_"></td>
	<td id="opera_"></td>
	<td id="safari_"></td>
</tr>
</table>




【JavaScriptの最新記事】
posted by at 2017-11-10 21:50 | JavaScript | このブログの読者になる | 更新情報をチェックする


Android SDK ポケットリファレンス
改訂版 Webデザイナーのための jQuery入門
今すぐ使えるかんたん ホームページ HTML&CSS入門
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX