Comment utiliser Modernizr pour détecter IE?

Question

Comment utiliser Modernizr pour détecter IE?

Demandé el 20 de Novembre, 2012: Quand la question a-t-elle été
53498 affichage: Nombre de visites la question a
4 Réponses: Nombre de réponses aux questions
Résolu: Situation réelle de la question

Cela peut être une question stupide, mais je voulais utiliser la Modernizr bibliothèque JS pour détecter certaines propriétés du navigateur afin de déterminer le contenu à afficher ou non.

J'ai une application appelée Pano2VR sorties HTML5 et SWF. J'ai besoin de l'HTML5 pour appareil iOS utilisateurs.

Cependant, c'est à dire qu'il ne rend pas cette "HTML5" de sortie. Il semble que leur sortie utilise CSS3 3D transforme et WebGL, une ou plusieurs apparemment pas pris en charge dans IE9.

Ainsi, pour les utilisateurs, j'ai besoin d'afficher la version Flash. J'avais l'intention d'utiliser une IFRAME et passer la SRC par l'intermédiaire d'un Modernizr script ou d'un document.écrire le bon code IFRAME selon le navigateur.

Tous ce qui conduit à comment puis-je utiliser Modernizr pour détecter tout simplement IE ou pas c'est à dire? Ou de détecter CSS 3d transforme?

Ou est-il une autre façon de le faire?

Demandé el 20 de Novembre, 2012 par Steve

Answer 1

4 Réponses

Answer 2

197voto

Code Uniquely Points 2806

Modernizr ne détecte pas les navigateurs en tant que tel, il détecte la fonctionnalité et la capacité sont présents et c'est tout le jist de ce qu'elle essaie de faire.

Vous pouvez essayer de l'accrocher dans un simple script de détection de ce genre et puis de l'utiliser pour faire votre choix. J'ai inclus la Détection de la Version ainsi juste au cas où c'est nécessaire. Si vous voulez seulement vérifier de n'importe quelle version de IE vous pouvez simplement regarder pour le navigateur.userAgent ayant une valeur de "MSIE".

var BrowserDetect = {
        init: function () {
            this.browser = this.searchString(this.dataBrowser) || "Other";
            this.version = this.searchVersion(navigator.userAgent) || this.searchVersion(navigator.appVersion) || "Unknown";
        },
        searchString: function (data) {
            for (var i = 0; i < data.length; i++) {
                var dataString = data[i].string;
                this.versionSearchString = data[i].subString;

                if (dataString.indexOf(data[i].subString) !== -1) {
                    return data[i].identity;
                }
            }
        },
        searchVersion: function (dataString) {
            var index = dataString.indexOf(this.versionSearchString);
            if (index === -1) {
                return;
            }

            var rv = dataString.indexOf("rv:");
            if (this.versionSearchString === "Trident" && rv !== -1) {
                return parseFloat(dataString.substring(rv + 3));
            } else {
                return parseFloat(dataString.substring(index + this.versionSearchString.length + 1));
            }
        },

        dataBrowser: [
            {string: navigator.userAgent, subString: "Chrome", identity: "Chrome"},
            {string: navigator.userAgent, subString: "MSIE", identity: "Explorer"},
            {string: navigator.userAgent, subString: "Trident", identity: "Explorer"},
            {string: navigator.userAgent, subString: "Firefox", identity: "Firefox"},
            {string: navigator.userAgent, subString: "Safari", identity: "Safari"},
            {string: navigator.userAgent, subString: "Opera", identity: "Opera"}
        ]

    };
    
    BrowserDetect.init();
    document.write("You are using <b>" + BrowserDetect.browser + "</b> with version <b>" + BrowserDetect.version + "</b>");

Vous pouvez ensuite vérifier simplement:

BrowserDetect.browser == 'Explorer';
BrowserDetect.version <= 9;

Répondu el 20 de Novembre, 2012 par Code Uniquely (2806 Points )

Answer 3

12voto

twome Points 1178

Modernizr peut détecter CSS 3D transforme, ouais.

Le lien ci-dessus vous permet de sélectionner les tests à inclure dans un Modernizr construire, et l'option que vous recherchez y est disponible.

Sinon, comme user356990 répondu, vous pouvez utiliser les commentaires conditionnels si vous êtes à la recherche pour IE et IE seul. Plutôt que de créer une variable globale, vous pouvez utiliser HTML5 Boilerplate est <html> commentaires conditionnels astuce pour attribuer une classe:

<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->

Puis, dans votre JS, mettre en place un chèque pour la classe:

myChecks.ltIE9 = (function(){
    var htmlElemClasses = document.querySelector('html').className.split(' ');
    if (!htmlElemClasses){return false;}
    for (var i = 0; i < htmlElemClasses.length; i += 1 ){
      var klass = htmlElemClasses[i];
      if (klass === 'lt-ie9'){
        return true;
      }
    }
    return false;
}());

Ceci est utile pour conditionnellement chargement soit jQuery 1.x ou 2.x - avec jQuery initialisé, vous pouvez simplement vérifier avec $('html').hasClass('lt-ie9').

Quelle que soit la méthode que vous choisissez, vous pouvez tester avec

if ( myChecks.ltIE9 || Modernizr.csstransforms3d ){
    // iframe or flash fallback
}

Ne prenez pas ce || littéralement, bien sûr.

Répondu el 5 de Septembre, 2013 par twome (1178 Points )

Answer 4

9voto

Pete B Points 471

Si vous recherchez une version JS (utilisant une combinaison de détection de fonctionnalité et de reniflement UA) de ce que faisait html5 boilerplate:

 var IE = (!! window.ActiveXObject && +(/msie\s(\d+)/i.exec(navigator.userAgent)[1])) || NaN;
if (IE < 9) {
    document.documentElement.className += ' lt-ie9' + ' ie' + IE;
}

Répondu el 7 de Novembre, 2013 par Pete B (471 Points )

Answer 5

0voto

user356990 Points 13

Vous pouvez utiliser le hack < !-- [if IE] > pour définir une variable globale js qui est ensuite testée dans votre code js normal. Un peu moche mais a bien fonctionné pour moi.

Répondu el 25 de Février, 2013 par user356990 (13 Points )

Comment utiliser Modernizr pour détecter IE?

Réponses

Questions en vedette

Top Tags

Prograide.com

Powered by:

Comment utiliser Modernizr pour détecter IE?

Réponses

Questions en vedette

Top Tags

Dans notre réseau

Prograide.com

Powered by: