web-dev-qa-db-ja.com

Javascript IE検出、単純な条件付きコメントを使用してみませんか？

IEを検出するために、ほとんどのJavascriptライブラリはあらゆる種類のトリックを行います。

  • jQueryは、いくつかの機能を検出するために、ページのDOMに一時オブジェクトを追加するようです。
  • YUI2はYAHOO.env.ua = function()（ファイルyahoo.js）

この答え を読んだ後、それが本当だと思いました。単にJavaScriptでIEを検出するために、ページに追加することができます。

<!--[if IE]><script type="text/javascript">window['isIE'] = true;</script><![endif]-->

<script type="text/javascript" src="all-your-other-scripts-here.js"></script>

window.isIE変数は、以下を実行するだけで、すべてのJavascriptコードに設定されます。

if(window.isIE)
   ...

すべてのページに追加する必要があるため、これが苦痛になる可能性があるという事実に加えて、気づかないかもしれない問題/考慮事項はありますか？

参考までに、 ブラウザ検出ではなくオブジェクト検出 を使用した方が良いことはわかっていますが、ブラウザ検出を使用する必要がある場合があります。

javascriptinternet-explorerbrowser-detectionconditional-comments
47
Marco Demaio

James Padolseyが GitHubの小さなスニペット を置いたので、ここで引用します。

// ----------------------------------------------------------
// A short snippet for detecting versions of IE in JavaScript
// without resorting to user-agent sniffing
// ----------------------------------------------------------
// If you're not in IE (or IE version is less than 5) then:
// ie === undefined
// If you're in IE (>=5) then you can determine which version:
// ie === 7; // IE7
// Thus, to detect IE:
// if (ie) {}
// And to detect the version:
// ie === 6 // IE6
// ie > 7 // IE8, IE9 ...
// ie < 9 // Anything less than IE9
// ----------------------------------------------------------

// UPDATE: Now using Live NodeList idea from @jdalton

var ie = (function(){

    var undef,
        v = 3,
        div = document.createElement('div'),
        all = div.getElementsByTagName('i');

    while (
        div.innerHTML = '<!--[if gt IE ' + (++v) + ']><i></i><![endif]-->',
        all[0]
    );

    return v > 4 ? v : undef;

}());

もちろん、すべてのクレジットはジェームズに送られるべきです、私はただのメッセンジャーです（ただし、コピーペーストのアクションが間違っている場合はメッセンジャーを撃ってください）。

作成されたフォークも見てください。 Paul Irishは comment で内部の仕組みを説明しました。

59
Marcel Korpel

そのようにしたい場合は、htmlを変更せずにjavascript内で行うことができるため、代わりに条件付きコンパイルを使用する方がはるかに良いと思います：

var isIE = /*@cc_on!@*/false;
40
AlfonsoML

Marcel Korpelの回答は機能しなくなりました（IE 10ではundefを返すため、IE 10はIEではないように見えます）。注：= IE 11も。

これはそのコードの変形ですが、 Microsoftの推奨事項 に由来します。前のコードを使用していた場合、まったく同じ方法で呼び出されるように構築されているため、この置換をドロップするだけで済みます。

条件付きコメント/コンパイルとは異なり、最小化機能でも問題なく動作するはずです。

// ----------------------------------------------------------
// If you're not in IE (or IE version is less than 5) then:
// ie === undefined
// If you're in IE (>=5) then you can determine which version:
// ie === 7; // IE7
// Thus, to detect IE:
// if (ie) {}
// And to detect the version:
// ie === 6 // IE6
// ie > 7 // IE8, IE9, IE10 ...
// ie < 9 // Anything less than IE9
// ----------------------------------------------------------
var ie = (function(){
    var undef,rv = -1; // Return value assumes failure.
    var ua = window.navigator.userAgent;
    var msie = ua.indexOf('MSIE ');
    var trident = ua.indexOf('Trident/');

    if (msie > 0) {
        // IE 10 or older => return version number
        rv = parseInt(ua.substring(msie + 5, ua.indexOf('.', msie)), 10);
    } else if (trident > 0) {
        // IE 11 (or newer) => return version number
        var rvNum = ua.indexOf('rv:');
        rv = parseInt(ua.substring(rvNum + 3, ua.indexOf('.', rvNum)), 10);
    }

    return ((rv > -1) ? rv : undef);
}());

IE11で動作するように更新されました。動作していなかったことを指摘してくれた「acarlon」と、修正の基になったコードを「mario」に感謝します！

26
Sean Colombo

IE 11は大きく変化し、現在では過去の多くのブラウザ検出方法が機能しません。以下のコードは、IE 11以前で機能します。

function isIE()
{
    var isIE11 = navigator.userAgent.indexOf(".NET CLR") > -1;      
    var isIE11orLess = isIE11 || navigator.appVersion.indexOf("MSIE") != -1;
    return isIE11orLess;
}
11
webber55

私はあなたが探しているものを持っていると思います。 JavascriptとclientCapsを使用して、Internet Explorerのフルバージョンを文字列「AA.BB.CCCC.DDDD」として取得できます。

http://www.pinlady.net/PluginDetect/IE/

IE 5.5以降（IE 10）を含む。）で動作するようです。条件付きコメントや追加のHTML要素は不要で、純粋なJavascriptソリューションです。

現時点では、IE Mobileの動作は不明ですが、このclientCapsメソッドが失敗した場合に備えて、常にバックアップ検出メソッドを使用できます。

これまでのところ、私は言わなければならない、それはかなりうまく機能します。

6
Eric Gerds

あなたはあなた自身の質問に答えたと思います：最初に、IEを検出するだけなので、スクリプトは本質的にブラウザの世界を2つの部分に分割します：IEと<everythingelse>。

次に、すべてのHTMLページに風変わりなコメントを追加する必要があります。 jQueryやYUIのような広範囲のJavaScriptライブラリは、幅広いサイトに挿入/利用するのに「簡単」でなければならないことを考えると、自動的にそれらをゲートから使いにくくします。

4
jmbucknall

navigator.userAgentは、（機能検出ではなく）ブラウザ検出が本当に必要な場合に存在し、jQueryはそれを使用して$.browserオブジェクトの情報を取得します。 IE固有の条件付きコメントをeveryページに含めるよりもはるかに優れています。

3
PleaseStand

ここで、ブラウザ検出のためのいくつかの本当にシンプルなハックを見つけることができます： http://www.thespanner.co.uk/2009/01/29/detecting-browsers-javascript-hacks/

var isIE = IE='\v'=='v';
2
yckart

私はそのコードを使用しています

var isIE = navigator.userAgent.indexOf（ 'MSIE'）> -1;

2
Viktor Fursov
var version = navigator.userAgent.match(/(msie) (\d+)/i);
console.log(version);

誰かがそれを望んでいる場合に備えて、この質問を見た後、私はすぐに何かを書いた。

**編集**

以下のJohnny Darvallのコメントごとに、Internet Explorer 11：

http://blogs.msdn.com/b/ieinternals/archive/2013/09/21/internet-Explorer-11-user-agent-string-ua-string-sniffing-compatibility-with-gecko- webkit.aspx

2
Jacksonkr

ブラウザーを確認するのは悪い考えです。代わりにブラウザーfeaturesを確認することをお勧めします。たとえば、通常IEでサポートされていない機能を使用するために、ユーザーがIEを使用しているかどうかを確認します。ただし、現在および将来のIE以外のすべてのブラウザがその機能をサポートすることを知っていますか？ ？いいえ。たとえば、jQueryでの使用方法の方が優れています。特定のバグ/機能をチェックする小さなテストケースを作成して実行します。

とにかく、スクリプトを使用してテストできない視覚的なバグであるため、ブラウザーのチェックが常に必要な場合があります。この場合、他の場所ではなく必要な位置でブラウザをチェックするため、条件付きコメントの代わりにjavascriptを使用することをお勧めします（そのファイルで定義されていないisIEをチェックする.jsファイルを想像してください）

1
ThiefMaster

私のユースケースでは、IE9より低いかどうかを本当に検出する必要があるだけなので、

if (document.body.style.backgroundSize === undefined && navigator.userAgent.indexOf('MSIE') > -1)
{
//IE8- stuff
}
0
chiliNUT