¿Cómo detecto IE 8 con jQuery?

102

Necesito detectar no solo el tipo de navegador, sino también la versión usando jQuery. Principalmente necesito averiguar si es IE 8 o no.

No estoy seguro de si lo estoy haciendo correctamente.

Si lo hago :

if (jQuery.browser.version >= 8.0) {
dosomething}

No estoy seguro de que funcione para la versión 8.123.45.6, ¿o sí?

Editar: tenga en cuenta que JQuery 2+ ha dejado de admitir IE8 y versiones anteriores y, por lo tanto, ya no se puede usar para detectar IE8. Si usa una versión actual de JQuery, es necesario usar una solución que no sea JQuery.

javascript jquery salmane
fuente
11
las respuestas que se sugieren a continuación sugieren que use jQuery.browser. Sin embargo, la documentación de jQuery desaprueba el uso de jQuery.browser. En su lugar, sugieren que use jQuery.support y señale una función que no es compatible para marcar el navegador. Por ejemplo, puede usar if (jQuery.support.opacity == false) {su código IE8 e IE7}
IberoMedia
Esto jquery.support.opacitysolo hizo lo que quería. Gracias ...
nrod
3
Salte a una respuesta que detecte versiones específicas de manera confiable, no confíe en jQuery.browser, no necesite una biblioteca adicional como Modernizr y no requiera editar el HTML (por lo que es adecuado para complementos, etc.) ...
user56reinstatemonica8
Si está haciendo las cosas correctamente, casi nunca debería necesitar realizar la detección de la versión del navegador. Hay una razón por la que esta función se eliminó de jQuery, y esa razón es que la detección de la versión del navegador es una mala práctica. En su lugar, usar la detección de características resolverá el problema en casi todos los casos.
Spudley
2
Necesito detectar IE8 porque es el único navegador cuyo motor javascript es tan lento que muestra un cuadro de diálogo que dice "¿desea dejar de ejecutar el script" en esta página, y el valor predeterminado es "sí". Si hay un mecanismo de detección de características para esto, lo usaré. De lo contrario, es si el navegador == IE8. No puedo optimizar el javascript, porque es el propio código de vista de árbol de Kendo el que lo causa
PandaWood

Respuestas:

79

Está documentado en la documentación de la API de jQuery . Busque Internet Explorer con $.browser.msiey luego verifique su versión con $.browser.version.

ACTUALIZACIÓN: $ .browser eliminado en jQuery 1.9

El método jQuery.browser () ha quedado obsoleto desde jQuery 1.3 y se eliminó en 1.9. Si es necesario, está disponible como parte del complemento jQuery Migrate. Recomendamos utilizar la detección de funciones con una biblioteca como Modernizr.

AndiDog
fuente
si lo hago: if (jQuery.browser.version> = 8.0) {dosomething} No estoy seguro de que funcione para la versión 8.123.45.6 o ¿no?
salmane
13
Es una cuerda, así que debes hacerlo if(jQuery.browser.version.substring(0, 2) == "8.") { ... }. De esa forma, funcionará con todas las versiones de IE8.
AndiDog
13
jQuery.browserquedó obsoleto en la versión 1.3 y es posible que se cambie a un complemento en el futuro. Consulte los documentos de jQuery.browser
bendytree
Afortunadamente, todavía existe y no se menciona la desaprobación, @bendytree
Alastair
47
jquery.browser se elimina en 1.9
Mandeep Jain
173

Creo que la mejor forma sería esta:

De HTML5 boilerplate:

<!--[if lt IE 7]> <html lang="en-us" class="no-js ie6 oldie"> <![endif]-->
<!--[if IE 7]>    <html lang="en-us" class="no-js ie7 oldie"> <![endif]-->
<!--[if IE 8]>    <html lang="en-us" class="no-js ie8 oldie"> <![endif]-->
<!--[if gt IE 8]><!--> <html lang="en-us" class="no-js"> <!--<![endif]-->

en JS:

if( $("html").hasClass("ie8") ) { /* do your things */ };

especialmente desde que $.browserse ha eliminado de jQuery 1.9+.

meo
fuente
11
Esta es una forma muy inteligente de detectar versiones de IE. ¡Me gusta mucho!
Greg
pero no funciona si su sitio web se entrega con el encabezado 'Content-type: application / xhtml + xml', entonces estos comentarios condicionales se ignoran
philipp
1
Muy inteligente ... pero vale la pena señalar que debe verificar las clases actuales agregadas por los condicionales en HTML5BP. Por el momento creo que la clase es lt-ie9AOTie8
byronyasgur
2
@meo También me gusta esta implementación. Pero, ¿hay alguna razón por la que la clase esté vinculada en <html>lugar de <body>?
descansando el
@meo Interesante. Gracias.
descansando
89

Esto debería funcionar para todas las versiones menores de IE8

if ($.browser.msie  && parseInt($.browser.version, 10) === 8) {
  alert('IE8'); 
} else {
  alert('Non IE8');
}

- actualizar

Tenga en cuenta que $ .browser se elimina de jQuery 1.9

Mithun Sreedharan
fuente
56

No olvide que también puede usar HTML para detectar IE8.

<!--[if IE 8]>
<script type="text/javascript">
    ie = 8;
</script>
<![endif]-->

Tener eso antes de todos sus scripts le permitirá verificar la variable "ie" o lo que sea.

TheBuzzSaw
fuente
4
Esta sintaxis también admite comparadores "menor que" ("[si lt IE 7]") y "mayor que" ("[si gt IE 8]").
spiffytech
1
<! - [if lte IE 8]> para incluir ie8
user227353
1
Esta es la mejor manera de hacerlo, simplemente redirija a otra página que diga "¿Por qué estás usando IE8?" ¡ACTUALIZAR AHORA!
Leon Gaban
2
Según el estándar actual, les preguntaría por qué están usando IE.
TheBuzzSaw
Esta parece la mejor solución ahora, ya que JQuery 2.1.1 no funciona con IE8 y, por lo tanto, no se puede utilizar para detectar IE8.
Dave
27

document.documentMode no está definido si el navegador no es IE8,

devuelve 8 para el modo estándar y 7 para 'compatible con IE7'

Si se ejecuta como IE7, hay muchas funciones css y dom que no serán compatibles.

Kennebec
fuente
9
Tenga en cuenta que IE9 devuelve 9. Sin embargo, esta debería ser una respuesta más votada ahora que $ .browser ya no es una buena solución. Prueba:if ((document.documentMode || 100) < 9) { // IE8
Don McCurdy
if (document.documentMode! == undefined && document.documentMode == 8) {...}
jpprade
Para algunas aplicaciones en las que IE8 todavía se usa mucho, es decir, escuelas de EE. UU., El enfoque de @ Don McCurdy es simple y efectivo. En conjunto con Modernizr funciona bien.
cbmtrx
¡Gran respuesta! Esto devuelve números de versión para IE8 hasta IE11 (en comparación con IE5 hasta IE9 para comentarios condicionales; si alguien todavía necesita detectar IE7 o IE6 genuinos también, deberá usar comentarios condicionales). Tenga en cuenta que, según los documentos , puede volver a aparecer0 mientras se carga la página: "intente determinar el modo de compatibilidad del documento en otro momento" (es decir, después de que el documento esté listo).
user56reinstatemonica8
15

Asumiendo...

  • ... que es el motor de renderizado crujiente de versiones antiguas de IE lo que está interesado en detectar, para que un estilo se vea bien en el IE antiguo (de lo contrario, use la detección de características)
  • ... que no puede simplemente agregar comentarios condicionales al HTML , por ejemplo, para complementos JS que se pueden aplicar a cualquier página (de lo contrario, simplemente haga el truco de las clases condicionales en <body>o <html>)

... entonces este es probablemente el mejor truco (basado en esta variante que no es de jQuery, un poco menos flexible ). Crea, luego prueba y luego elimina un comentario condicional apropiado.

(Los comentarios condicionales se ignoran en IE10 + 'modo estándar', ¡pero eso debería estar bien ya que IE10 + 'modo estándar' no tiene un motor de renderizado loco!)

Suelta esta función:

function isIE( version, comparison ){
    var $div = $('<div style="display:none;"/>');

    // Don't chain these, in IE8 chaining stops some versions of jQuery writing the conditional comment properly
    $div.appendTo($('body'));
    $div.html('<!--[if '+(comparison||'')+' IE '+(version||'')+']><a>&nbsp;</a><![endif]-->');

    var ieTest = $div.find('a').length;
    $div.remove();
    return ieTest;
}

Entonces úsalo así:

if(isIE()){ /* runs in all versions of IE after 4 before standards-mode 10 */ }

if(isIE(8)){ /* runs in IE8 */ }

if(isIE(9)){ /* runs in IE9 */ }

if(isIE(8,'lte')){ /* runs in IE8 or below */ }

if(isIE(6,'lte')){ /* if you need this, I pity you... */ }

También sugiero almacenar en caché los resultados de esta función para que no tenga que repetirla. Por ejemplo, puede usar la cadena (comparison||'')+' IE '+(version||'')como clave para almacenar y verificar el resultado de esta prueba en un objeto en algún lugar.

user56reinstatemonica8
fuente
9

Nota:

1) $ .browser parece haberse eliminado en jQuery 1.9+ (como lo señaló Mandeep Jain). Se recomienda utilizar .support en su lugar.

2) $ .browser.version puede devolver "7" en IE> 7 cuando el navegador está en modo "compatibilidad".

3) A partir de IE 10, los comentarios condicionales dejarán de funcionar.

4) jQuery 2.0+ dejará de ser compatible con IE 6/7/8

5) document.documentMode parece estar definido solo en los navegadores Internet Explorer 8+. El valor devuelto le dirá en qué modo de "compatibilidad" se está ejecutando Internet Explorer. Aunque todavía no es una buena solución.

Probé numerosas opciones .support (), pero parece que cuando un navegador IE (9+) está en modo de compatibilidad, simplemente se comportará como IE 7 ... :(

Hasta ahora solo encontré que esto funciona (tipo a):

(si documentMode no está definido y htmlSerialize y opacity no son compatibles, entonces es muy probable que esté mirando IE <8 ...)

if(!document.documentMode && !$.support.htmlSerialize && !$.support.opacity) 
{
    // IE 6/7 code
}
Hanzaplastique
fuente
5

Si juegas con las versiones del navegador, muy a menudo no se obtiene nada bueno. No quiere implementarlo usted mismo. Pero puedes Modernizr hecho por Paul Irish y otras personas inteligentes. Detectará lo que el navegador realmente puede hacer y colocará las clases apropiadas en el <html>elemento. Sin embargo, con Modernizr , puede probar la versión de IE de esta manera:

$('html.lt-ie9').each() {
    // this will execute if browser is IE 8 or less
}

De manera similar, puede usar .lt-ie8 y .lt-ie7.

koubic
fuente
3

También debería mirar jQuery.support . La detección de funciones es mucho más confiable que la detección del navegador para codificar su funcionalidad (a menos que solo esté intentando registrar las versiones del navegador).

jkyle
fuente
3
¿Cómo usarías jQuery.support para detectar IE8?
BishopZ
si AJAX es lo que está buscando, puede usar jQuery.support.ajax, que devuelve verdadero si el navegador es compatible con AJAX
Jonathan Lin
Esta respuesta debería ayudar: stackoverflow.com/questions/1944169/…
helgatheviking
3

Puede detectar fácilmente qué tipo y versión del navegador, usando este jquery

$(document).ready(function()
{
 if ( $.browser.msie ){
    if($.browser.version == '6.0')
    {   $('html').addClass('ie6');
    }
    else if($.browser.version == '7.0')
    {   $('html').addClass('ie7');
    }
    else if($.browser.version == '8.0')
    {   $('html').addClass('ie8');
    }
    else if($.browser.version == '9.0')
    {   $('html').addClass('ie9');
    }
 }
 else if ( $.browser.webkit )
 { $('html').addClass('webkit');
 }
 else if ( $.browser.mozilla )
 { $('html').addClass('mozilla');
 }
 else if ( $.browser.opera )
 { $('html').addClass('opera');
 }
});
Sanooj
fuente
1

Aquí está el complemento de detección de navegador Jquery para identificar la detección del navegador / sistema operativo.

Puede usar esto para fines de estilo después de incluir el complemento.

$("html").addClass($.os.name);
$("body").addClass($.browser.className);
$("body").addClass($.browser.name);
Aravind Vel
fuente
0

Puede usar $ .browser para detectar el nombre del navegador. los valores posibles son:

  • webkit (a partir de jQuery 1.4)
  • safari (obsoleto)
  • ópera
  • msie
  • mozilla

u obtenga una bandera booleana: $ .browser.msie será verdadero si el navegador es MSIE.

en cuanto al número de versión, si solo está interesado en el número de versión principal, puede usar parseInt ($. browser.version, 10). no es necesario analizar la cadena $ .browser.version usted mismo.

De todos modos, la propiedad $ .support está disponible para detectar soporte para características particulares en lugar de depender de $ .browser.

Yonatan Betzer
fuente