Esta podría ser una pregunta estúpida, pero yo quería usar la Modernizr JS de la biblioteca con el fin de detectar algún explorador de propiedades para determinar qué contenido mostrar o no mostrar.

Tengo una aplicación llamada Pano2VR que las salidas de HTML5 y SWF. Tengo la necesidad de HTML5 para iOS, los usuarios de dispositivos.

Sin embargo, es decir, no hacer esta «HTML5» cualquier salida. Parece que su salida utiliza CSS3 3D transforma y WebGL, una o más aparentemente incompatible en IE9.

Así que, para aquellos usuarios que necesito para mostrar la versión de Flash. Yo estaba planeando usar un IFRAME y pasar el SRC a través de un Modernizr script o documento.escribir el correcto código IFRAME dependiendo del navegador.

Todo lo cual conduce a ¿cómo puedo usar Modernizr para detectar simplemente IE o no IE? O detectar para 3d CSS transforma?

O hay otra manera de hacer esto?

InformationsquelleAutor Steve | 2012-11-20

8 Comentarios

  1. 190

    Modernizr no detectar navegadores como tal, se detecta que cuentan y la capacidad son el presente y este es el jist de lo que está tratando de hacer.

    Usted podría tratar de enganchar en una simple secuencia de comandos de detección como este y, a continuación, utilizarlo para hacer su elección. He incluido la Detección de Versión así sólo en caso de que sea necesario. Si sólo quieres comprobar de cualquier versión de IE sólo podía mirar para el navegante.userAgent tiene un valor de «MSIE».

    JS:

    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: "Edge", identity: "MS Edge"},
    {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: "Opera", identity: "Opera"},  
    {string: navigator.userAgent, subString: "OPR", identity: "Opera"},  
    {string: navigator.userAgent, subString: "Chrome", identity: "Chrome"}, 
    {string: navigator.userAgent, subString: "Safari", identity: "Safari"}       
    ]
    };
    BrowserDetect.init();
    document.write("You are using <b>" + BrowserDetect.browser + "</b> with version <b>" + BrowserDetect.version + "</b>");

    A continuación, basta con comprobar:

    BrowserDetect.browser == 'Explorer';
    BrowserDetect.version <= 9;
    • Gracias. Terminé finalmente el rastreo de que el problema era su archivo necesario soporte webgl. Por lo tanto, podría utilizar Modernizador para probar y hacer un documento.escritura de un bloque de código de la otra. Pero esta es una excelente solución para la detección del navegador. Gracias de nuevo.
    • Una cosa para recordar: La UA cadena es completamente configurable por el usuario.. por Lo que la comprobación de la UA cadena NO es una forma coherente de comprobación del navegador. developer.mozilla.org/en-US/docs/DOM/window.navigator.userAgent En la sección «Notas»: Browser identification based on detecting the user agent string is unreliable and is not recommended, as the user agent string is user configurable.
    • Sí, pero ¿qué porcentaje de los usuarios navegar por la web con una modificación/falso/incorrecto UA cadena? Cuánto tiempo de ingeniería, ¿quieres pasar asegurar que la pequeña minoría de la población tiene una experiencia óptima en su sitio? Navegador oler a través de la UA cadena es un práctico y sano enfoque.
    • no puedo estar más de acuerdo. Enferma de «la característica de detección de mal» tipo de conferencias. Estamos haciendo ingeniería, no perseguir el arte
    • Usted tiene un punto y coma final después de que el último elemento en dataBrowser, que deben ser eliminados.
    • Yo también debería haber mencionado que sólo he encontrado la coma porque estoy copiar/pegar el código de la palabra-por-palabra para usar en mi proyecto actual y jslint graznaban en mí para ello. Gracias!
    • Es la suposición general de que si alguien modifica su UA cadena, entonces ellos saben lo que están haciendo y pueden lidiar con las consecuencias. De hecho, esto es exactamente lo que la UA cadena existe para declarar la versión del navegador al servidor. Si el cliente quiere mentir sobre eso, y bueno, esa es la vida! Por supuesto, hay una pequeña posibilidad de que la cadena que se va a cambiar sin el consentimiento del usuario, pero en la práctica eso no es una preocupación real – y, bueno se supone que vamos a alimentar el usuario y frotar su espalda demasiado?
    • Añadido soporte para IE 11 (Tridente). Obtiene la versión de su navegador (11) en lugar de la versión del motor (7). Si desea que la versión del motor de sacar: si (esto.versionSearchString == «Tridente») { this.versionSearchString = «rv»; } y, a continuación, cambiar la identidad en dataBrowser así que no te Explorer 7 cuando en realidad es Trident 7.
    • Es allí una manera de agregar esta función como una prueba como parte de Modernizr, tal vez de regresar algo como Modernizr.addTest(result,function)? sería muy útil disponer de nombre de navegador añade como una clase css
    • Hay algunos ejemplos de cómo se puede hacer esto en gist.github.com/danott/855078
    • el código está funcionando muy bien, sin embargo no detectar si es una de escritorio o navegador móvil.
    • Para mí, da navegador «desconocido» en ie11. Funciona en Chrome…
    • Añadido IE11 Apoyo que ahora utiliza el tridente y un motor de rv: número de
    • BrowserDetect.navegador opera escribe chrome
    • Hay un problema, Opera, Microsoft borde también han Chrome en su navegador, así que no veo el Chrome como navegador cuando estoy en la Ópera
    • He añadido una línea extra en ‘OPERACIONES’ para encontrar la última Ópera de versiones. Funciona con MS Borde demasiado. Pero como he dicho al inicio de mi respuesta, usted realmente debe usar la función de detección para las cosas que usted está usando en lugar de confiar en el navegador y los números de versión correcto. 🙂 Seguro que no dirá su versión Móvil, por ejemplo, o si se puede utilizar FileAPI

  2. 19

    Puede utilizar Modernizr para detectar simplemente IE o no, es decir, mediante la comprobación de SVG SMIL soporte de animación.

    Si has incluido SMIL detección de características en su Modernizr la instalación, puede utilizar un simple CSS enfoque, y el objetivo de la .no smil clase que Modernizr se aplica a la html elemento:

    html.no-smil {
    /* IE/Edge specific styles go here - hide HTML5 content and show Flash content */
    }

    Alternativamente, usted podría usar Modernizr con un simple JavaScript enfoque, así:

    if ( Modernizr.smil ) {
    /* set HTML5 content */
    } else {
    /* set IE/Edge/Flash content */
    }

    Tener en cuenta, es decir,/Edge puede que algún día el apoyo SMIL, pero actualmente no hay planes para hacerlo.

    De referencia, aquí hay un enlace a la SMIL tabla de compatibilidad en caniuse.com.

    • Mejor respuesta de la omi. Así de simple
    • Mientras esto no funciona, por ahora funciona. El punto de detección de características y Modernizr es que usted no tiene que preocuparse acerca de lo que pasará mañana. Si el Borde de las actualizaciones de mañana con smil apoyo, el código ya no funciona y puede que ni siquiera lo saben.
    • He editado para mayor información y precaución.
    • Lo cierto es que hay no hay planes para SMIL apoyo en el Borde.
  3. 12

    La detección de 3D CSS transforma

    Modernizr puede detectar 3D CSS transforma, sí. La veracidad de Modernizr.csstransforms3d le dirá si el navegador es compatible con ellos.

    El enlace de arriba te permite seleccionar las pruebas a incluir en un Modernizr construir, y la opción que estás buscando está disponible allí.


    La detección de IE específicamente

    Alternativamente, como user356990 respondió, puede utilizar los comentarios condicionales si usted está buscando para IE IE y solo. En lugar de crear una variable global, puede utilizar HTML5 Boilerplate del <html> comentarios condicionales truco para asignar una clase:

    <!--[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]-->

    Si usted ya tiene jQuery inicializado, usted puede comprobar con $('html').hasClass('lt-ie9'). Si usted necesita para comprobar qué versión de IE que usted está en así que usted puede condicionalmente cargar jQuery 1.x o 2.x, usted puede hacer algo como esto:

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

    N. B. es decir los comentarios condicionales son sólo admite hasta IE9 inclusive. De IE10 en adelante, Microsoft recomienda el uso de la característica de detección en lugar de la detección del navegador.


    Cualquiera que sea el método que elija, usted había entonces prueba con

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

    No || literalmente, por supuesto.

    • Personalmente yo siempre trato de hacer función de detección basados en lugar de la detección del navegador
    • Bueno para ti, lo mismo aquí? Yo… no creo que en realidad leer mi respuesta.
    • La suya fue la primera respuesta que en realidad sugiere el uso de la característica de detectar así que pensé que podría ayudar a otra persona si leen el comentario
    • oh, lo siento. Yo pensaba que eran condenarme para la inclusión de la IE de la prueba.
  4. 9

    Si estás buscando una versión JS (usando una combinación de detección de características y UA sniffing) de lo html5 boilerplate utiliza para hacer:

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

    CSS trucos tiene una buena solución para orientar es decir, 11:

    http://css-tricks.com/ie-10-specific-styles/

    El .RED y Tridente/7.0 son únicos a IE, así que puede ser utilizado para detectar la versión de IE 11.

    El código, a continuación, agrega la cadena de Agente de Usuario a la etiqueta html con el atributo «data-useragent», así, es decir, 11 pueden ser dirigidos específicamente…

  6. 2

    Bien, después de hacer más investigación sobre este tema terminé utilizando la siguiente solución para la focalización es decir, un 10+.
    Como IE10&11 son los únicos navegadores que soportan el -ms-alto-contraste de la consulta de medios de comunicación, que es una buena opción sin ningún tipo de JS:

    @media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {  
    /* IE10+ specific styles go here */  
    }

    Funciona a la perfección.

  7. 1

    Puede utilizar el < !-- [if IE] >
    hack para establecer un mundial js variable que luego se pone a prueba en su normal el código js. Un poco feo, pero ha funcionado bien para mí.

    • Los comentarios condicionales no son más compatibles con internet explorer >=10.
  8. 1

    Necesitaba para detectar IE vs la mayoría de todo lo demás y yo no queremos depender de la UA cadena. He encontrado que el uso es6number con Modernizr hizo exactamente lo que yo quería. Yo no tengo mucha preocupación con respecto a este cambio, ya que no esperan es decir, para siempre apoyo ES6 Número. Así que ahora sé la diferencia entre cualquier versión de IE vs Edge/Chrome/Firefox/Opera/Safari.

    Más detalles aquí: http://caniuse.com/#feat=es6-number

    Nota que no estoy realmente preocupado acerca de Opera Mini falsos negativos. Usted podría ser.

Dejar respuesta

Please enter your comment!
Please enter your name here