2017-11-18 更新 : edge を追加 ※ 前回投稿日 : 2014-10-02 ▼ 運営中サイトのブラウザ比率 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("edge") > -1) {
alert("Edge");
}
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("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;
}
}
</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="edge">edge</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 src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></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("edge") > -1) {
browser_string = "Edge";
}
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の最新記事】
- Replit : js-web-speech
- JavaScript の論理和(||) による『無かった場合の値の代入』/ expr1 || expr2 は expr1 を false と見ることができる場合は expr2 を返します
- Seesaa の記事に下の『最新の同カテゴリのリスト』のリンクの最後に付く ?seesaa_related=category を削除する方法
- JavaScript : 入力文字列を 変数用16進数表現 に変換する
- JavaScript : 入力文字列を htmlentity に変換する
- HTML5 で行われる入力チェックを :invalid :valid 疑似クラスと JavaScript を使用してリアルタイムにエラーを視認させる
- HTML5 で行われる入力チェックのエラーメッセージをカスタマイズする JavaScript の記述( この手のコントロールはとてもデリケートです。いろいろなパターン検証が必要です )
- テーブルのセルをクリックして背景色を rgb(0,0,0) から #000000 の変換で、eval を使う事の考察
- JavaScript & VBScript : ブラウザから Windows の OS のバージョンを判定
- Firefox、IE11 の canvas で動作する楕円( ellipse )関数
- 文字列を UTF-8(２バイト以上) で表現した時の 16進数表現の文字列を取得する
- ブログで jQuery を使用するのに、全ての記事で使うわけでは無いので、記事毎でロードする
- JavaScript による２会話アプリケーションのコントロール(2)
- JavaScript による２会話アプリケーションのコントロール(1)
- JavaScript : Global な undefined 変数に絡むいろいろ
- 簡易縦書き変換
- ブラウザの WebGL チェック : jQuery 名前空間へ変数($.is_webgl)追加
- JSONP の原理と、簡単な利用方法の実際のコード( 実装は jQuery が良いですが、Access-Control-Allow-Origin: * のほうが楽だし読込み先を制限できます )
- document.createElement("a") で新しいウインドウ(タブ)を開く
- JavaScript と VBScript のカラーコード(#RRGGBB)の文字列と数値間の相互変換
