SQLの窓

2014年10月02日


JavaScript : ブラウザ判定( IE11 対応 )

IE11 の登場で少し変わりました(IE11 を一意に識別することが必要な場合があります。 その場合は、Trident トークンを使ってください)

IEのシェアは大きいですが、実際問題として IE6、IE7、IE8、IE9、IE10 が存在します。IE 以外では Firefox と Google Chrome を少なくとも視野にいれる必要があります。( あと、Safari もあります )

そういえば、『Operaが独自路線を転換、ブラウザエンジンをWebKitに切り替え』 なんで、気苦労が少し減りますが、相変わらず IE は増える一方で・・・・

ちにみに、jQuery 1.9 では、$.browser は削除されています
<script>
function browser_name() {
	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>
<input type="button" value="表示" onclick="browser_name();">



関連する記事
prototype.js の Browser メソッドを転用して jQueryの名前空間へ投入。IE バージョンも含めてブラウザ(仕様)判定 String オブジェクトにメソッドとして実装 IE と それ以外の判定方法として "ie".browser() で判定できます。 ▼ 実際の実行


<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())'>

jQuery の名前空間に登録
<script>
if ( window[window.location.hostname+'.loadjQuery'] !== true ) {
	window[window.location.hostname+'.loadjQuery'] = true;
	if ( !window.jQuery ) {
		document.write("<"+"script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></"+"script>");
	}
}
</script>
<script>
$.extend({
	browser_name: (function(){
	var userAgent = window.navigator.userAgent.toLowerCase();
	var appVersion = window.navigator.appVersion.toLowerCase();
	var browser_string = "unknown"

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

	})()
});

console.log($.browser_name);

</script>

▼ オリジナルコード
http://winofsql.jp/VA003334/infoboard.php?id=070828100942&mid=sjscript&pid=3


IE と それ以外だけの判定
<script type="text/javascript">

	var ie = window.navigator.appName.toLowerCase().indexOf("microsoft") > -1;
	ie |= window.navigator.userAgent.toLowerCase().indexOf("trident/7.0") > -1;
	if (ie) {
		// IE 用
		console.log("IE");
	}
	else {
		// IE 以外用
		console.log("IE以外");
	}

</script>



【JavaScriptの最新記事】
posted by lightbox at 2014-10-02 17:45 | JavaScript | このブログの読者になる | 更新情報をチェックする
バッチ処理

Microsoft Office
container 終わり

フリーフォントで簡単ロゴ作成
フリーフォントでボタン素材作成
フリーフォントで吹き出し画像作成
フリーフォントではんこ画像作成
ほぼ自由に利用できるフリーフォント
フリーフォントの書体見本とサンプル
画像を大きく見る為のウインドウを開くボタンの作成

Android SDK ポケットリファレンス
改訂版 Webデザイナーのための jQuery入門
今すぐ使えるかんたん ホームページ HTML&CSS入門
CSS ドロップシャドウの参考デモ
Google Hosted Libraries
cdnjs
BUTTONS (CSS でボタン)
イラストAC
ぱくたそ
写真素材 足成
フリーフォント一覧
utf8 文字ツール
右サイド 終わり
base 終わり