web-dev-qa-db-fra.com

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

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 fait une regex sur l'agent utilisateur dans sa YAHOO.env.ua = function() (fichier yahoo.js)

Après avoir lu cette réponse , je me suis dit que c’était 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, la variable window.isIE est définie pour tout notre code Javascript, en effectuant simplement:

if(window.isIE)
   ...

En plus du fait que cela risque d’être pénible, car il doit être ajouté à toutes les pages, existe-t-il des problèmes/considérations que je pourrais ignorer?}

FYI: Je sais qu'il est préférable d'utiliser la détection d'objet plutôt que la détection de navigateur , mais il existe des cas où vous devez toujours utiliser la détection de navigateur.

javascriptinternet-explorerbrowser-detectionconditional-comments
46
Marco Demaio

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 devraient aller à James, je ne suis que le messager (mais s'il vous plaît, tirez sur le messager si mon copier-coller a été une erreur).

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

58
Marcel Korpel

Si vous voulez le faire de cette façon, je pense qu'il est bien préférable d'utiliser la compilation conditionnelle, car vous pouvez le faire dans le javascript sans avoir besoin de changer le code HTML:

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

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

Ceci est une variante de ce code, mais qui provient de recommandations de Microsoft . Si vous utilisiez le code précédent, vous pouvez simplement ajouter ce remplacement car il est conçu pour être appelé exactement de la même manière.

Contrairement aux commentaires conditionnels/compilation, cela 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» de m'avoir signalé que cela ne fonctionnait pas et à «mario» pour le code sur lequel j'ai basé le correctif!

26
Sean Colombo

Internet Explorer 11 a beaucoup changé et de nombreuses méthodes de détection de navigateur antérieures 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;
}
11
webber55

Je pense avoir ce que vous cherchez. Vous pouvez obtenir la version complète d'Internet Explorer sous la forme d'une chaîne "AA.BB.CCCC.DDDD" à l'aide de Javascript et de clientCaps.

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

Il semble fonctionner pour IE 5.5 et versions ultérieures (y compris IE 10) . Il est immunisé contre le mode navigator.userAgent/document/browser. des commentaires, ou des éléments HTML supplémentaires. C'est une solution pure Javascript.

Je ne suis pas encore sûr du comportement de IE Mobile, mais vous pouvez toujours utiliser une méthode de détection de sauvegarde en cas d'échec de cette méthode clientCaps.

Jusqu'ici, je dois dire que cela fonctionne plutôt bien. 

6
Eric Gerds

Je pense que vous avez répondu à votre propre question: tout d’abord, il ne détecte qu’IE, le script diviserait donc l’univers des navigateurs en deux parties: IE et <everythingelse>. 

Deuxièmement, vous devez ajouter un commentaire farfelu à chaque page HTML. Étant donné que de nombreuses bibliothèques JavaScript, telles que jQuery et YUI, doivent être "faciles" à insérer/utiliser pour une multitude de sites, vous les rendriez automatiquement plus difficiles à utiliser en dehors du portail.

4
jmbucknall

navigator.userAgent existe si la détection du navigateur (plutôt que la détection des fonctionnalités) est vraiment nécessaire et jQuery l'utilise pour obtenir les informations relatives à l'objet $.browser. C'est bien plus agréable que de devoir inclure un commentaire conditionnel spécifique à IE dans every page.

3
PleaseStand

Vous trouverez ici quelques astuces très simples pour la détection de navigateur: http://www.thespanner.co.uk/2009/01/29/detecting-browsers-javascript-hacks/

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

J'utilise ce code

var isIE = navigator.userAgent.indexOf ('MSIE')> -1;

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

quelque chose de rapide que j'ai écrit rapidement après avoir examiné cette question au cas où quelqu'un le voudrait.

** MODIFIER **

Par le commentaire _ {de Johnny Darvall} ci-dessous, j'ajoute un lien pour tous ceux qui essaient de repérer 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

La vérification des navigateurs est une mauvaise idée - il vaut mieux vérifier le navigateur caractéristiques à la place. Par exemple, vous vérifiez généralement si l'utilisateur utilise IE parce que vous souhaitez utiliser une fonctionnalité non prise en charge dans IE. Cependant, savez-vous que TOUS les navigateurs actuels et futurs non-IE prendront en charge cette fonctionnalité? Non . Ainsi, le chemin, par exemple jQuery est mieux utilisé: il crée et exécute de petits cas de test vérifiant certains bogues/fonctionnalités - et vous pouvez simplement vérifier des éléments tels que if (browser_supports_XYZ) au lieu de vérifier si l'utilisateur utilise un navigateur spécifique.

Quoi qu'il en soit, il est toujours nécessaire de rechercher le navigateur, car il s'agit d'un bug visuel que vous ne pouvez pas tester avec un script. Dans ce cas, il est préférable d’utiliser javascript plutôt que des commentaires conditionnels, car le navigateur vérifie à l’endroit où vous en avez besoin plutôt qu’à un autre endroit (imaginez un fichier .js où vous recherchez isIE, qui n’est jamais défini dans ce fichier. )

1
ThiefMaster

Pour mon cas d’utilisation, j’ai juste besoin de détecter s’il est inférieur à IE9, j’utilise donc

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