html5 - navegador - ¿La forma correcta de usar Modernizr para detectar IE?
detectar navegador javascript (7)
Esta podría ser una pregunta estúpida, pero quería usar la biblioteca Modernizr JS para detectar algunas propiedades del navegador y determinar qué contenido mostrar o no mostrar.
Tengo una aplicación llamada Pano2VR que produce HTML5 y SWF. Necesito el HTML5 para los usuarios de dispositivos iOS.
Sin embargo, IE no representa esta salida "HTML5" en absoluto. Parece que su salida usa transformaciones CSS3 3D y WebGL, uno o más aparentemente sin soporte en IE9.
Entonces, para esos usuarios necesito mostrar la versión Flash. Estaba planeando usar un IFRAME y pasar el SRC a través de un script o documento de Modernizr. Escriba el código IFRAME correcto según el navegador.
Todo lo cual conduce a cómo uso Modernizr para detectar simplemente IE o no IE? ¿O detectar las transformaciones CSS 3D?
¿O hay otra manera de hacer esto?
Detectando transformaciones CSS 3D
Modernizr puede detectar transformaciones CSS 3D , sí. La veracidad de Modernizr.csstransforms3d le dirá si el navegador los admite.
El enlace de arriba le permite seleccionar qué pruebas incluir en una compilación de Modernizr, y la opción que está buscando está disponible allí.
Detectando IE específicamente
Alternativamente , como respondió el usuario 356990, puede usar comentarios condicionales si está buscando solo IE e IE. En lugar de crear una variable global, puede usar el truco de comentarios condicionales <html> HTML5 Boilerplate 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 ya tiene JQuery inicializado, puede verificar con $(''html'').hasClass(''lt-ie9'') . Si necesita verificar en qué versión de IE se encuentra para poder cargar jQuery 1.xo 2.x condicionalmente, 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;
}());
Los comentarios condicionales de NB IE solo son compatibles hasta IE9 inclusive. A partir de IE10 en adelante, Microsoft fomenta el uso de la detección de características en lugar de la detección del navegador.
Cualquiera que sea el método que elija, entonces probará con
if ( myChecks.ltIE9 || Modernizr.csstransforms3d ){
// iframe or flash fallback
}
No tomes eso || literalmente, por supuesto.
Los trucos CSS tienen una buena solución para apuntar a IE 11:
http://css-tricks.com/ie-10-specific-styles/
.NET y Trident / 7.0 son exclusivos de IE, por lo que pueden usarse para detectar IE versión 11.
A continuación, el código agrega la cadena del agente de usuario a la etiqueta html con el atributo ''data-useragent'', por lo que IE 11 se puede orientar específicamente ...
Necesitaba detectar IE vs casi todo lo demás y no quería depender de la cadena UA. Descubrí que el uso de es6number con Modernizr hizo exactamente lo que quería. No me preocupa mucho este cambio, ya que no espero que IE sea compatible con el número ES6. 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
Tenga en cuenta que realmente no me preocupan los falsos negativos de Opera Mini. Usted podría ser.
Puede usar Modernizr para detectar simplemente IE o no IE, marcando para SVG SMIL animation support.
Si ha incluido la detección de características SMIL en su configuración de Modernizr, puede usar un enfoque simple de CSS y dirigirse a la clase .no-smil que Modernizr aplica al elemento html :
html.no-smil {
/* IE/Edge specific styles go here - hide HTML5 content and show Flash content */
}
Alternativamente, podría usar Modernizr con un enfoque simple de JavaScript, así:
if ( Modernizr.smil ) {
/* set HTML5 content */
} else {
/* set IE/Edge/Flash content */
}
Tenga en cuenta que IE / Edge algún día podría soportar SMIL , pero actualmente no hay planes para hacerlo.
Como referencia, aquí hay un enlace a la tabla de compatibilidad SMIL en caniuse.com .
Puede usar el truco < !-- [if IE] > para establecer una variable global js que luego se prueba en su código js normal. Un poco feo, pero me ha funcionado bien.
Si está buscando una versión JS (usando una combinación de detección de características y olfateo UA) de lo que solía hacer la regla html5:
var IE = (!! window.ActiveXObject && +(/msie/s(/d+)/i.exec(navigator.userAgent)[1])) || NaN;
if (IE < 9) {
document.documentElement.className += '' lt-ie9'' + '' ie'' + IE;
}
Modernizr no detecta los navegadores como tales, detecta qué característica y capacidad están presentes y esta es la totalidad de lo que está tratando de hacer.
Podría intentar enganchar un script de detección simple como este y luego usarlo para hacer su elección. También he incluido la detección de versiones por si acaso es necesario. Si solo desea consultar cualquier versión de IE, puede buscar el archivo navigator.userAgent con el valor "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: "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>");
Luego puedes simplemente verificar:
BrowserDetect.browser == ''Explorer'';
BrowserDetect.version <= 9;