デジタルゲート – ホームページ制作やリニューアル、サイトの企画・制作・運営をしています

仕様が変わったIE11の判別をjavascriptでしたい時はこの方法

·

master

IE11ではユーザエージェントの文字列が、IE10等のいままでのIEの各バージョンとは表記のルールが変更されている。
そのため、古くから使われてきた、javascriptによるブラウザの振り分けでは判別出来ないケースが起きる。

userAgentの比較

IE10のユーザエージェント

mozilla/5.0 (compatible; msie 10.0; windows nt 6.1; wow64; trident/6.0; slcc2; .net clr 2.0.50727; .net clr 3.5.30729; .net clr 3.0.30729; media center pc 6.0; .net4.0c; .net4.0e; mddcjs)

IE11のユーザエージェント

mozilla/5.0 (windows nt 6.1; wow64; trident/7.0; slcc2; .net clr 2.0.50727; .net clr 3.5.30729; .net clr 3.0.30729; media center pc 6.0; .net4.0c; .net4.0e; np06; rv:11.0) like gecko

比べると分かるがIE11になり

  • 「compatible」「MSIE」が削除
  • ブラウザーのバージョンが「rv」として追加
  • 「like Gecko」が追加

このため、今までMSIEの文字列の有無でIEかを判断していたスクリプトは正しく判断できない。

IE11の判別が正しくないスクリプト

JAVASCRIPT

<script>
var ua = window.navigator.userAgent;
var ie = false;
if(ua.match(/msie/)){
	ie = true;
}
if(ie){
	alert('このブラウザはIEです');
}else{
	alert('このブラウザはIEではありません');
}
</script>

IE10の場合は正しく「このブラウザはIEです」が表示されるが、IE11の場合は「このブラウザはIEではありません」が表示される。

IE11も正しく判別できるスクリプト

JAVASCRIPT

<script>
var ua = window.navigator.userAgent.toLowerCase();
var ie = false;
var v = null;

if(ua.match(/msie/) || ua.match(/trident/)){
	ie = true;
	v = ua.match(/(msie\s|rv:)([\d\.]+)/)[2];
}

if(ie){
	msg = 'このブラウザはIEのバージョン';
	msg += v;
	msg += 'です';
	alert(msg);
}else{
	alert('このブラウザはIEではありません');
}
</script>

IE11の場合「このブラウザはIEのバージョン11.0です」と表示される

解説

javascriptでブラウザのユーザエージェントを取得する場合は

var ua = navigator.userAgent;

で良いが、ここでは後処理を考慮し

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

とすることで、全て小文字に統一している

IE判定

if(ua.match(/msie/) || ua.match(/trident/)){
	ie = true;
	v = ua.match(/(msie\s|rv:)([\d\.]+)/)[2];
}

msie または trident が含まれる場合はIEと判断
meie または rv に続く数字からバージョンを取得

表示

if(ie){
	msg = 'このブラウザはIEのバージョン';
	msg += v;
	msg += 'です';
	alert(msg);
}else{
	alert('このブラウザはIEではありません');
}

実際にはこの部分でIEと他のブラウザ用に処理を分けたりして使う

In:

,

Tags:

, ,