web-dev-qa-db-fra.com

Meilleure façon de vérifier IE moins de 9 en JavaScript sans bibliothèque

Quel serait votre moyen le plus rapide et le plus rapide (le meilleur) de détecter un navigateur qui est IE et la version inférieure à 9 en JavaScript, sans utiliser jQuery ou des bibliothèques de modules complémentaires?

javascriptinternet-explorerbrowserbrowser-detection
77
bcm

Javascript 

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;

}());

Vous pouvez alors faire:

ie < 9

Par James Panolsey à partir d'ici: http://james.padolsey.com/javascript/detect-ie-in-js-using-conditional-comments

118
Mike Lewis

pour ce que ça vaut:

    if(  document.addEventListener  ){
        alert("you got IE9 or greater");
    }

Ceci cible avec succès IE 9+ parce que la méthode addEventListener a été prise en charge très tôt pour tous les principaux navigateurs, à l'exception de IE. (Chrome, Firefox, Opera et Safari) Référence MDN . Il est actuellement supporté par IE9 et on peut s’attendre à ce qu’il continue d’être supporté ici à l’extérieur.

99
vector

En utilisant des commentaires conditionnels, vous pouvez créer un bloc de script qui ne sera exécuté que dans IE inférieur à 9.

<!--[if lt IE 9 ]>
<script>
var is_ie_lt9 = true;
</script>
<![endif]-->

Bien sûr, vous pouvez faire précéder ce bloc d’un bloc universel qui déclare var is_ie_lt9=false, que cela remplacerait pour IE inférieur à 9. (Dans ce cas, vous voudriez supprimer la déclaration var, car elle serait répétitive).

[~ # ~] edit [~ # ~] : Voici une version qui ne repose pas sur des blocs de script en ligne (pouvant être exécutée à partir d'un fichier externe), mais n’utilise pas le sniffing d’agent d’utilisateur:

Via @ cowboy :

with(document.createElement("b")){id=4;while(innerHTML="<!--[if gt IE "+ ++id+"]>1<![endif]-->",innerHTML>0);var ie=id>5?+id:0}
27
Yahel

bah aux commentaires conditionnels! Code conditionnel tout le chemin !!! (IE idiot)

<script type="text/javascript">
/*@cc_on
   var IE_LT_9 = (@_jscript_version < 9);
@*/
</script>

Sérieusement, jeter ceci au cas où cela vous conviendrait mieux ... c'est la même chose, cela peut simplement être dans un fichier .js au lieu de HTML en ligne

Remarque: c’est une pure coïncidence que la vérification de jscript_version soit "9" ici. Réglez-le sur 8, 7, etc. NE cocherez PAS "is IE8", vous devez rechercher les versions de jScript pour ces navigateurs.

10
Mark Kahn

Voici une amélioration par rapport à la solution de James Padolsey:

1) Il ne pollue pas la mémoire (le fragment de code de James crée 7 fragments de document non supprimés lors de la détection d'IE11, par exemple).
2) C'est plus rapide car il vérifie la valeur de documentMode avant de générer le balisage.
3) Il est beaucoup plus lisible, en particulier pour les programmeurs débutants en JavaScript.

Lien Gist: https://Gist.github.com/julianshapiro/9098609

/*
 - Behavior: For IE8+, we detect the documentMode value provided by Microsoft.
 - Behavior: For <IE8, we inject conditional comments until we detect a match.
 - Results: In IE, the version is returned. In other browsers, false is returned.
 - Tip: To check for a range of IE versions, use if (!IE || IE < MAX_VERSION)...
*/

var IE = (function() { 
    if (document.documentMode) {
        return document.documentMode;
    } else {
        for (var i = 7; i > 0; i--) {
            var div = document.createElement("div");

            div.innerHTML = "<!--[if IE " + i + "]><span></span><![endif]-->";

            if (div.getElementsByTagName("span").length) {
                return i;
            }
        }
    }

    return undefined;
})();
9
execution
var ie = !-[1,]; // true if IE less than 9

Ce hack est supporté dans ie5,6,7,8. Il est corrigé dans ie9 + (donc cela convient aux exigences de cette question). Ce hack fonctionne dans tous les modes de compatibilité IE.

Comment ça marche: ie le moteur traite un tableau avec un élément vide (comme ceci [ 1]) comme un tableau avec deux éléments, à la place les autres navigateurs pensent qu’il n’ya qu’un seul élément. Ainsi, lorsque nous convertissons ce tableau en nombre avec l'opérateur +, nous faisons quelque chose comme ça: (', 1' dans ie/'1' dans d'autres) * 1 et nous obtenons NaN dans ie et 1 dans d'autres. Ensuite, nous le transformons en valeur booléenne et inversons la valeur avec!. Simple. En passant, nous pouvons utiliser une version plus courte sans! signe, mais la valeur sera inversée.

C'est le hack le plus court à ce jour. Et je suis l'auteur;)

8
Aleko

J'ai décidé d'aller avec la détection d'objet à la place.

Après avoir lu ceci: http://www.quirksmode.org/js/support.html et ceci: http://diveintohtml5.ep.io/detect.html#canvas =

J'utiliserais quelque chose comme

if(!!document.createElement('canvas').getContext) alert('what is needed, supported');
6
bcm

Ce lien contient des informations pertinentes sur la détection des versions d'Internet Explorer:

http://tanalin.com/fr/articles/ie-version-js/

Exemple:

if (document.all && !document.addEventListener) {
    alert('IE8 or older.');
}
5
Michael Benin

Si j'étais vous, j'utiliserais compilation conditionnelle ou la détection de fonctionnalités.
Voici une autre alternative:

<!--[if lt IE 9]><!-->
<script>
    var LTEIE8 = true;
</script>
<!--<![endif]-->
4
Knu

Vous pouvez le faire rapidement et de manière sale avec une expression régulière et .match():

if (navigator.userAgent.match(/MSIE\s(?!9.0)/)) {
    // ie less than version 9
}
4
Alex

J'ai bien aimé la réponse de Mike Lewis mais le code n'a pas passé jslint et je ne comprenais pas la boucle funky. Mon cas d'utilisation est de mettre en place un message de navigateur non pris en charge inférieur ou égal à IE8.

Voici une version gratuite de jslint basée sur celle de Mike Lewis:

/*jslint browser: true */
/*global jQuery */
(function () {
    "use strict";
    var browserNotSupported = (function () {
        var div = document.createElement('DIV');
        // http://msdn.Microsoft.com/en-us/library/ms537512(v=vs.85).aspx
        div.innerHTML = '<!--[if lte IE 8]><I></I><![endif]-->';
        return div.getElementsByTagName('I').length > 0;
    }());
    if (browserNotSupported) {
        jQuery("html").addClass("browserNotSupported").data("browserNotSupported", browserNotSupported);
    }
}());
2
Doug

Est-ce que cela doit être fait en JavaScript?

Sinon, vous pouvez utiliser la syntaxe de commentaire conditionnelle spécifique à IE:

<!--[if lt IE 9]><h1>Using IE 8 or lower</h1><![endif]-->
2
LukeH
if (+(/MSIE\s(\d+)/.exec(navigator.userAgent)||0)[1] < 9) {
    // IE8 or less
}
  • extraire IE version avec: /MSIE\s(\d+)/.exec(navigator.userAgent)]
  • si c'est un navigateur non-IE, ceci retournera null alors dans ce cas, ||0 changera ce null en 0
  • [1] Obtiendra la version majeure de IE ou undefined si ce n'était pas un navigateur IE
  • menant + le convertira en nombre, undefined sera converti en NaN
  • comparer NaN avec un nombre retournera toujours false
1
Ivan

Vous essayez tous de trop compliquer de telles choses simples. Utilisez simplement un commentaire conditionnel JScript simple et clair. C'est le plus rapide, car il ajoute zéro code aux navigateurs non-IE pour la détection, et sa compatibilité remonte aux versions de IE avant que les commentaires conditionnels HTML soient pris en charge. En bref,

var IE_version=(-1/*@cc_on,@_jscript_version@*/);

Méfiez-vous des minificateurs: la plupart (si ce n'est tous) prendront le commentaire conditionnel spécial pour un commentaire régulier et le supprimeront

Fondamentalement, le code ci-dessus définit la valeur de IE_version sur la version de IE que vous utilisez ou -1 si vous n'utilisez pas IE. Une démonstration en direct:

var IE_version=(-1/*@cc_on,@_jscript_version@*/);
if (IE_version!==-1){
    document.write("<h1>You are using Internet Explorer " + IE_version + "</h1>");
} else {
    document.write("<h1>You are not using a version of Internet Explorer less than 11</h1>");
}
0
user7892745