POPSブログ

Javascript IE10 IE11 のブラウザ判定

288

  Category:  javascript2014/04/01 pops 

JQuery等でどうしてもブラウザ判定をしなければならない時があります。IE10 IE11 を含む簡単なブラウザ判定です。当方のJS用に作成したものです。
簡単なEdgeの判定を追加しました。2015/08/04

 

Javascript IE10 IE11 のブラウザ判定


IE10 IE11と主要ブラウザの判定

● ご使用のブラウザ名が表示されます。但し「Opera」は Chromeエンジン使用のため、Chrome と判定されます。


BROWSER

1. 主要ブラウザ用の、簡単な userAgent による判定です。
2. IEは「標準表示」の場合の判定です。「互換表示」の場合は正しく表示するかは保障されません。
3. 新たに、IE11以上のバージョンがでた場合は判定するかはわかりません。(仕様変更の恐れ有り)
4.「Opera Next」などChrome用エンジン使用の場合は Chrome と判定されます。
5. IE6 7 8 9 は「IETester」で正常に判定します。確認済み。
6. IE10 は「IE11エミュレーション」のドキュメントモードで確認しました。
7. IE11 および、IE 以外のブラウザは該当のブラウザで確認しました。
8. 問題などありましたら、自己責任で修正などしてください。
9. Edgeの判定を追加しました。Edgeで確認しました。


 

IE11のJS作成には、下記記事を参考に作りました。

【参考、参照】ふろしき.js: IE11のユーザエージェント問題 - 開発者側でできる対策 (判定方法の変更/互換性モードの利用)


JS

● JSは下記のとおりです。JS名は自由です。必要に応じて構築書き換えする。


//UserAgent
var ua=window.navigator.userAgent;

var browserIE=false;//IE判定
var browser_v=0;//IEバージョン番号
var browser_nm="";//browser名

//IE判定
if(ua.match(/MSIE/) || ua.match(/Trident/)) {
	//MSIE=7 8 9 10/Trident=11
    	browserIE=true;
    	browser_v=parseFloat(ua.match(/(MSIE¥s|rv:)([¥d¥.]+)/)[2]);
}
if (browserIE) {browser_nm="IE";}

//IE以外は該当の文字があれば判定
else if (ua.indexOf("Edge") > -1) {browser_nm="Edge";}
else if (ua.indexOf("Firefox") > -1) {browser_nm="Firefox";}
else if (ua.indexOf("Chrome") > -1) {browser_nm="Chrome";}
else if (ua.indexOf("Opera") > -1) {browser_nm="Opera";}
else if (ua.indexOf("Safari") > -1) {browser_nm="Safari";}
else {browser_nm="Unknown";}

var v_text="";
if (browser_v) {v_text="" + browser_v;}
//alert("BROWSER: " + browser_nm + v_text);

● ここで使用しているjQuery組み込み用JS

必要に応じてjQueryの中で使用できる様に構築書き換えする。

1. browserIE : で真偽が得られます。
2. browser_v : IEのバージョン番号が格納されます。
3. browser_nm : browser名が格納されます。IE Chrome ...



//browser-v2.js

(function($){

	$(function(){

		//UserAgent
		var ua=window.navigator.userAgent;

		var browserIE=false;//IE判定
		var browser_v=0;//IEバージョン番号
		var browser_nm="";//browser名

		//IE判定
		if(ua.match(/MSIE/) || ua.match(/Trident/)) {
			//MSIE=7 8 9 10/Trident=11
    			browserIE=true;
    			browser_v=parseFloat(ua.match(/(MSIE¥s|rv:)([¥d¥.]+)/)[2]);
		}
		if (browserIE) {browser_nm="IE";}

		//IE以外は該当の文字があれば判定
		else if (ua.indexOf("Edge") > -1) {browser_nm="Edge";}
		else if (ua.indexOf("Firefox") > -1) {browser_nm="Firefox";}
		else if (ua.indexOf("Chrome") > -1) {browser_nm="Chrome";}
		else if (ua.indexOf("Opera") > -1) {browser_nm="Opera";}
		else if (ua.indexOf("Safari") > -1) {browser_nm="Safari";}
		else {browser_nm="Unknown";}

		var v_text="";
		if (browser_v) {v_text="" + browser_v;}
		//alert("BROWSER: " + browser_nm + v_text);
		$('#view-text').text("BROWSER: " + browser_nm + v_text);

	});

})(jQuery);

● IE10の、RegExpの不具合について
下記のような判定を行った場合に、IE6 7 8 9 は正常に処理しますが、IE10では実行しません。これはバグ(仕様が変わったか?、IEではこのような事が多い)のようですが、現時点で直ってはいません。
よって、上記の様に RegExp を使用しない判定処理を行いました。


● IE10 11、RegExp形式でないので実行する


browser_v=parseFloat(ua.match(/(MSIE¥s|rv:)([¥d¥.]+)/)[2])

● IE10 11、RegExpを実行しない

IE10 11、ではこのような記述は出来ない。(別の書き方をする)


if (ua.match(/MSIE (¥d¥.¥d+)/)) {browser_v=parseFloat(RegExp.$1);}

● IE10 11、のnew RegExp実行形式

IEで「MSIE文字列」がある場合のバージョン番号を返します。(IE7 8 9 10)

【参照】Internet Explorer: ブラウザーではなく機能を検出する方法


new RegExp()形式で実行しないと結果がえられない。ここで IE11 は「MSIE文字列」がないために -1 を返す

この方法だと正常に処理するようです。(IEは本当に困りものです)


var rv=-1;//Default value
var ua=navigator.userAgent;
//version
var re=new RegExp("MSIE ([0-9]{1,}[¥.0-9]{0,})");
if (re.exec(ua) != null){
	rv=parseFloat(RegExp.$1);
}

Edgeの判定

Edgeのユーザー エージェントは下記の様になりますので、「Edge」の文字列があればEdgeと判定できるが、Chrome Safariの文字もあるので、判定では一番最初に記述しなければならない。
一応確認のために「WINDOWS 10」を入れて「Edge」で動作を確認しました。(直ぐ、WINDOWS 7に戻しましたが....)



Microsoft Edgeユーザー エージェント

Windows 10 32bit
Mozilla/5.0 (Windows NT 10.0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/42.0.2311.135 Safari/537.36 Edge/12.10240

Windows 10 64bit
Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/42.0.2311.135 Safari/537.36 Edge/12.10240

● IE10 11、のユーザエージェント、関連資料

【参考】Internet Explorer: ユーザー エージェント文字列

【参考】Internet Explorer 11: ユーザー エージェント文字列の変更

【参考】Internet Explorer 11 開発者向けガイド: IE11 Preview における互換性の変更点


IE8以降の互換表示設定、IEバージョン判定など、関連の良い記事がcyokodogサンのところにありました。

【参考】cyokodog: jQuery 1.9 で $.browser が使えなくなってしまった対策

【参考】cyokodog: IE のレンダリングバージョンの指定と判定方法の自分なりまとめ


●ユーザー エージェント文字列の実際例が下記に多く載っています。

【参考】utaukitune.ldblog.jp: User-Agent (ユーザー エージェント) 一覧


以上ですが...
「Edge」判定確認の目的で、問題なく導入できるとのアナウンスがあったので、指示に従い「WINDOWS 10」を短時間入れてみたが、タダほど怖いものは無いという印象だ、当方の場合は問題が多すぎるし、即「WINDOWS 7」に戻した。また元に戻すのも非常に大変である。詳細情報が出揃うまで1-2年待つことにしよう。2015/08/04

 


[ この記事のURL ]


タグ:memo , javascript

 

ブログ記事一覧

年別アーカイブ一覧



[1]