Détection Javascript IE, pourquoi ne pas utiliser de simples commentaires conditionnels ?

Question

Afin de détecter IE, la plupart des librairies Javascript font toutes sortes d'astuces.

• jQuery semble ajouter un objet temporaire dans le DOM de vos pages pour détecter certaines fonctionnalités,
• YUI2 effectue un regex sur l'agent utilisateur dans son fichier YAHOO.env.ua = function() (dossier yahoo.js )

Après avoir lu cette réponse il m'est venu à l'esprit que c'est vrai, pour détecter simplement IE en Javascript nous pourrions simplement ajouter à nos pages :

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

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

Maintenant, le window.isIE est définie pour tout notre code Javascript, en faisant simplement :

if(window.isIE)
   ...

Outre le fait que cela pourrait s'avérer pénible parce qu'il faut l'ajouter dans toutes les pages, Y a-t-il des problèmes ou des considérations dont je ne suis pas au courant ?

---

FYI : Je sais qu'il est préférable d'utiliser détection des objets plutôt que du navigateur mais il y a des cas où vous devez quand même utiliser la détection du navigateur.

Answer 1

James Padolsey a mis un petit extrait sur GitHub que je vais citer ici :

// ----------------------------------------------------------
// 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;

}());

Bien sûr, tous les crédits doivent aller à James, je ne suis que le messager (mais s'il vous plaît, tirez sur le messager si mon action de copier-coller est erronée).

Regardez également les fourches qui ont été créées. Paul Irish a expliqué le fonctionnement interne dans un commentaire .

Answer 2

Si vous voulez le faire de cette façon, je pense qu'il est beaucoup mieux d'utiliser la compilation conditionnelle à la place, car vous pouvez le faire dans le javascript sans avoir à modifier le html :

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

Answer 3

La réponse de Marcel Korpel ne fonctionne plus (dans IE 10, elle renvoie undef, donc IE 10 apparaît comme n'étant pas IE). NOTE : Maintenant mis à jour pour fonctionner aussi avec IE 11.

Il s'agit d'une variante de ce code, mais qui provient de Les recommandations de Microsoft . Si vous utilisiez le code précédent, vous pouvez simplement insérer ce remplacement puisqu'il est conçu pour être appelé exactement de la même manière.

Contrairement aux commentaires/compilation conditionnels, il devrait également fonctionner correctement avec les minimiseurs.

// ----------------------------------------------------------
// 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);
}());

mis à jour pour fonctionner avec IE11. Merci à 'acarlon' pour m'avoir signalé que cela ne fonctionnait pas, et à 'mario' pour le code sur lequel j'ai basé la correction !

Answer 4

IE 11 a beaucoup changé et maintenant beaucoup d'anciennes méthodes de détection du navigateur ne fonctionnent plus. Le code ci-dessous fonctionne pour IE 11 et les versions antérieures.

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

Answer 5

Je pense que j'ai ce que vous cherchez. Vous pouvez obtenir la version complète d'Internet Explorer sous la forme d'une chaîne de caractères "AA.BB.CCCC.DDDD" en utilisant Javascript et clientCaps.

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

Il semble fonctionner pour IE 5.5 et plus (y compris IE 10). Il est insensible au mode Navigator.userAgent/document/mode Browser. Il n'y a pas besoin de commentaires conditionnels, ni d'éléments HTML supplémentaires. Il s'agit d'une solution purement Javascript.

Je ne suis pas certain pour l'instant du comportement d'IE Mobile, mais vous pouvez toujours utiliser une méthode de détection de secours au cas où cette méthode clientCaps échouerait.

Jusqu'à présent, je dois dire que ça marche plutôt bien.