Como faço para detectar o IE 8 com jQuery?

102

Eu preciso detectar não apenas o tipo de navegador, mas também a versão usando jQuery. Principalmente, preciso descobrir se é o IE 8 ou não.

Não tenho certeza se estou fazendo isso corretamente.

Se eu fizer :

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

Não tenho certeza de que funcionará com a versão 8.123.45.6 ou funcionará?

Editar: Observe que o JQuery 2+ abandonou o suporte para IE8 e abaixo e, portanto, não pode mais ser usado para detectar o IE8. Se estiver usando uma versão atual do JQuery, é necessário usar uma solução não JQuery.

javascript jquery Salmane
fonte
11
as respostas sugeridas abaixo sugerem que você use jQuery.browser. No entanto, a documentação do jQuery descarta o uso de jQuery.browser. Em vez disso, eles sugerem que você use jQuery.support e aponte para um recurso que não é compatível para sinalizar o navegador. Por exemplo, você pode usar if (jQuery.support.opacity == false) {seu código do IE8 e IE7}
IberoMedia
Isso jquery.support.opacityfez o que eu queria. Obrigado ...
nrod
3
Pule para uma resposta que detecta versões específicas de forma confiável, não depende de jQuery.browser, não precisa de uma biblioteca extra como Modernizr e não requer edição de HTML (portanto, é adequado para plug-ins, etc.) ...
user56reinstatemonica8
Se você estiver fazendo as coisas corretamente, dificilmente precisará detectar a versão do navegador. Há um motivo pelo qual esse recurso foi removido do jQuery, e esse motivo é que a detecção da versão do navegador não é uma prática. Em vez disso, usar a detecção de recursos resolverá o problema em quase todos os casos.
Spudley
2
Preciso detectar o IE8 porque é o único navegador cujo mecanismo de javascript é tão lento que abre uma caixa de diálogo que diz "deseja parar de executar o script" nesta página, e o padrão é "sim". Se houver um mecanismo de detecção de recursos para isso, vou usá-lo. Caso contrário, é se o navegador == IE8. Não consigo otimizar o javascript, porque é o código de
visualização em

Respostas:

79

Ele está documentado na documentação da API jQuery . Verifique o Internet Explorer com $.browser.msiee, em seguida, verifique sua versão com $.browser.version.

ATUALIZAÇÃO: $ .browser removido do jQuery 1.9

O método jQuery.browser () está obsoleto desde o jQuery 1.3 e foi removido no 1.9. Se necessário, está disponível como parte do plugin jQuery Migrate. Recomendamos usar a detecção de recursos com uma biblioteca como a Modernizr.

AndiDog
fonte
se eu fizer: if (jQuery.browser.version> = 8.0) {dosomething} Não tenho certeza se funcionará para a versão 8.123.45.6 ou funcionará?
salmane
13
É uma corda, então você deve fazer if(jQuery.browser.version.substring(0, 2) == "8.") { ... }. Dessa forma, ele funcionará com todas as versões do IE8.
AndiDog
13
jQuery.browserfoi descontinuado em 1.3 e pode ser movido para um plugin no futuro. Consulte os documentos jQuery.browser
bendytree
Felizmente, ainda está por aí e não há menção de descontinuação, @bendytree
Alastair
47
jquery.browser foi removido em 1.9
Mandeep Jain
173

Acho que a melhor maneira seria esta:

Do padrão HTML5:

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

em JS:

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

especialmente desde $.browserque foi removido do jQuery 1.9+.

meo
fonte
11
Esta é uma maneira muito inteligente de detectar versões do IE. Eu gosto muito!
Greg
mas não funciona se o seu site for entregue com o cabeçalho 'Content-type: application / xhtml + xml', então esses comentários condicionais são ignorados
philipp
1
Muito inteligente ... mas vale a pena notar que você precisa verificar as classes atuais adicionadas pelas condicionais no HTML5BP. No momento, acho que a aula é lt-ie9AOTie8
byronyasgur
2
@meo Eu também gosto dessa implementação. Mas há uma razão pela qual a classe é anexada em <html>vez de <body>?
descansando em
@meo Interessante. Obrigado.
descansando de
89

Isso deve funcionar para todas as versões secundárias do IE8

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

- atualização

Observe que $ .browser foi removido do jQuery 1.9

Mithun Sreedharan
fonte
56

Não se esqueça de que você também pode usar HTML para detectar o IE8.

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

Ter isso antes de todos os seus scripts permitirá que você apenas verifique a variável "ie" ou qualquer outra coisa.

TheBuzzSaw
fonte
4
Esta sintaxe também suporta comparadores "menor que" ("[if lt IE 7]") e "maior que" ("[if gt IE 8]").
spiffytech
1
<! - [if lte IE 8]> por incluir ie8
user227353
1
Esta é a melhor maneira de fazer isso, basta redirecionar para outra página que diz "Por que você está usando o IE8?" ATUALIZE AGORA!
Leon Gaban
2
Pelos padrões de hoje, eu perguntaria por que eles estão usando o IE.
TheBuzzSaw
Esta parece ser a melhor solução agora, já que o JQuery 2.1.1 não funciona com o IE8 e, portanto, não pode ser usado para detectar o IE8!
Dave
27

document.documentMode é indefinido se o navegador não for IE8,

retorna 8 para o modo padrão e 7 para 'compatível com o IE7'

Se estiver rodando como IE7, há muitos recursos css e dom que não serão suportados.

kennebec
fonte
9
Observe que o IE9 retorna 9. Esta deve ser uma resposta com maior votação, entretanto, agora que $ .browser não é mais uma boa solução. Experimente:if ((document.documentMode || 100) < 9) { // IE8
Don McCurdy
if (document.documentMode! == undefined && document.documentMode == 8) {...}
jpprade
Para algumas aplicações em que o IE8 ainda é muito usado - nomeadamente, escolas dos EUA - a abordagem de @ Don McCurdy é simples e eficaz. Em conjunto com a Modernizr, funciona bem.
cbmtrx
Ótima resposta! Isso retorna números de versão do IE8 até o IE11 (em comparação com o IE5 até o IE9 para comentários condicionais - se alguém ainda precisar detectar o IE7 ou o IE6 genuíno, você precisará usar comentários condicionais). Observe que, de acordo com os documentos, ele pode retornar 0enquanto a página está carregando - "tente determinar o modo de compatibilidade do documento mais tarde" (ou seja, após o documento estar pronto).
user56reinstatemonica8
15

Assumindo ...

  • ... que é o mecanismo de renderização crunky de versões antigas do IE que você está interessado em detectar, para fazer um estilo parecer certo no antigo IE (caso contrário, use a detecção de recursos)
  • ... que você não pode simplesmente adicionar comentários condicionais ao HTML - por exemplo, para plug-ins JS que podem ser aplicados a qualquer página (caso contrário, basta fazer o truque das classes condicionais em <body>ou <html>)

... então este é provavelmente o melhor truque (baseado nesta variante não-jQuery, um pouco menos flexível ). Ele cria, testa e remove um comentário condicional apropriado.

(Os comentários condicionais são ignorados no IE10 + 'modo padrão' - mas isso deve funcionar, já que o IE10 + 'modo padrão' não tem um mecanismo de renderização maluco!)

Largue esta função:

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

Em seguida, use-o assim:

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... */ }

Também sugiro armazenar em cache os resultados dessa função para que você não precise repeti-la. Por exemplo, você pode usar a string (comparison||'')+' IE '+(version||'')como uma chave para armazenar e verificar o resultado desse teste em um objeto em algum lugar.

user56reinstatemonica8
fonte
9

Nota:

1) $ .browser parece ter sido descartado no jQuery 1.9+ (conforme observado por Mandeep Jain). É recomendado usar .support .

2) $ .browser.version pode retornar "7" no IE> 7 quando o navegador está no modo de "compatibilidade".

3) A partir do IE 10, os comentários condicionais não funcionarão mais.

4) jQuery 2.0+ deixará de oferecer suporte para IE 6/7/8

5) document.documentMode parece estar definido apenas nos navegadores Internet Explorer 8+. O valor retornado informará em qual modo de "compatibilidade" o Internet Explorer está sendo executado. Ainda não é uma boa solução.

Tentei várias opções .support (), mas parece que quando um navegador IE (9+) está no modo de compatibilidade, ele simplesmente se comporta como o IE 7 ... :(

Até agora, eu só descobri que isso funcionava (tipo-a):

(se documentMode não estiver definido e htmlSerialize e opacity não forem suportados, então provavelmente você está olhando para o IE <8 ...)

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

Se você mexe com as versões do navegador, muitas vezes não dá certo. Você não quer implementá-lo sozinho. Mas você pode Modernizr feito por Paul Irish e outras pessoas inteligentes. Ele detectará o que o navegador realmente pode fazer e colocará as classes apropriadas no <html>elemento. No entanto, com o Modernizr , você pode testar a versão do IE assim:

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

Da mesma forma, você pode usar .lt-ie8e .lt-ie7.

koubic
fonte
3

Você também deve olhar para jQuery.support . A detecção de recursos é muito mais confiável do que a detecção do navegador para codificar sua funcionalidade (a menos que você esteja apenas tentando registrar as versões do navegador).

jkyle
fonte
3
como você usaria jQuery.support para detectar o IE8?
BishopZ
se AJAX é o que você está procurando, você pode usar jQuery.support.ajax, que retorna verdadeiro se o navegador suportar AJAX
Jonathan Lin
Esta resposta deve ajudar: stackoverflow.com/questions/1944169/…
helgatheviking
3

Você pode detectar facilmente qual tipo e versão do 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
fonte
1

Aqui está o plugin de detecção de navegador Jquery para identificar a detecção de navegador / sistema operacional.

Você pode usar isso para fins de estilização após incluir o plugin.

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

Você pode usar $ .browser para detectar o nome do navegador. os valores possíveis são:

  • webkit (a partir do jQuery 1.4)
  • safari (obsoleto)
  • ópera
  • msie
  • Mozilla

ou obter um sinalizador booleano: $ .browser.msie será verdadeiro se o navegador for MSIE.

quanto ao número da versão, se você estiver interessado apenas no número da versão principal - você pode usar parseInt ($. browser.version, 10). não há necessidade de analisar a string $ .browser.version por conta própria.

De qualquer forma, a propriedade $ .support está disponível para detecção de suporte para recursos específicos, em vez de depender de $ .browser.

Yonatan Betzer
fonte