JavaScriptでIEのバージョンを判定する(IE 11まで)※User Agent未使用


  • 公開:
  • 更新:
  • 編集:
概要 ▶ JavaScriptでUser Agentを使用せずInternet Explorerのブラウザーバージョンを判定。バージョン毎の機能などで判定。

20150406-JavaScriptでIEのバージョン判定-01

タイトルの通りですが、Internet Explorer(以下IE)のバージョンをJavaScriptで判定するコードです。(User Agentは使用しません)

それでは早速コードを紹介します。

//IEの判定 via https://w3g.jp/blog/tools/js_browser_sniffing
var _ua = (function(){
    return {
        lte_IE6:typeof window.addEventListener == "undefined" && typeof document.documentElement.style.maxHeight == "undefined",
        lte_IE7:typeof window.addEventListener == "undefined" && typeof document.querySelectorAll == "undefined",
        lte_IE8:typeof window.addEventListener == "undefined" && typeof document.getElementsByClassName == "undefined",
        lte_IE9:document.uniqueID && typeof window.matchMedia == "undefined",
        gte_IE10:document.uniqueID && window.matchMedia ,
        eq_IE8:document.uniqueID && document.documentMode === 8,
        eq_IE9:document.uniqueID && document.documentMode === 9,
        eq_IE10:document.uniqueID && document.documentMode === 10,
        eq_IE11:document.uniqueID && document.documentMode === 11,
//        eq_IE10:document.uniqueID && window.matchMedia && document.selection,
//        eq_IE11:document.uniqueID && window.matchMedia && !document.selection,
//        eq_IE11:document.uniqueID && window.matchMedia && !window.ActiveXObject,
        Trident:document.uniqueID
    }
})();


元ネタは「JavaScript ユーザエージェント条件分岐便利スニペット」(W3G)です。使い方はほとんど同じです。

IE 6以下向けのコードを実行したければ、以下の様に書きます。

if(_ua.lte_IE6){
//ここにIE 6以下向けのコードを書く
}


IE 8だけ動作するコードを実行したければ、以下の様に書きます。

if(_ua.eq_IE8){
//ここにIE 8用のコードを書く
}


元のコード(スニペット)はほとんど直す必要もないのですが、気になるところがあって手を入れています。


まず、返り値の記述の仕方を変更しています。元ネタでは「ltIE6」がIE6以下となっていますが、個人的には「以下」とそれ自体を含む場合は、lt(less than)ではなく、lte(less than or equal to)が良いと思っているので、lte_IE6にしています。

そして、IE 8であればeq_IE8など返るようにと、eq_IE8~eq_IE11を追加しています。IE 8以上では「document.documentMode」にバージョンが入っているので、それをそのまま使用しています。(「document.uniqueID」は不要ですが、IEならではのオブジェクトなので入れています)

Windows Internet Explorer 8 を使用して Web ページのドキュメント互換モードを確認するには、document オブジェクトの documentMode プロパティを使用します
META タグと将来の互換性のロック



●機能だけでIE10とIE11を判断

コメントアウトしてある部分はブラウザーの機能からIE 10とIE 11を判定しようというものです。

本来、このコード(スニペット)はそういう方面からのアプローチだったので、入れておきました。


「document.selection」はIE 10に存在し、IE 11には存在しません。(IE 11で「window.getSelection」に置き換わりました)

このため、「document.uniqueID && window.matchMedia && document.selection」でIE 10、「document.uniqueID && window.matchMedia && !document.selection」でIE 11と判定できます。


また、IE 11ではActiveXがWindowオブジェクトから隠蔽されているので「document.uniqueID && window.matchMedia && !window.ActiveXObject」でIE 11と判定できます。

Internet Explorer 11 以降、navigator オブジェクトでは plugins プロパティと mimeTypes プロパティがサポートされます。 さらに、window.ActiveXObject プロパティは DOM から隠蔽されています (これは、このプロパティを使って Internet Explorer 11 を検出できないことを意味します)。
クロスブラウザー プラグインの検出 (Windows)


以上です。


余談ですが、Windows 10の新しいブラウザーSpartanはどうやって判定するのでしょうかね?

もう判定しなくても良いくらい、他のブラウザーと挙動が同じであればWeb制作者としてうれしいですね。

それでは。



●参考

カテゴリー:

このページをぜひシェアしてください