No desenvolvimento do front-end do site, os problemas de compatibilidade do navegador já nos fizeram apressar, e eu não sei quantos problemas isso nos levará a nascer. A compatibilidade do navegador é o primeiro problema que a estrutura de desenvolvimento do front-end precisa resolver. Para resolver o problema de compatibilidade, você deve primeiro determinar com precisão o tipo e a versão do navegador.
JavaScript é o principal idioma do desenvolvimento do front-end. Podemos julgar o tipo e a versão do navegador escrevendo programas JavaScript. Geralmente, existem duas maneiras de julgar os tipos de navegador em JavaScript. Um é distingui -los com base nos atributos exclusivos de vários navegadores, e o outro é julgar analisando o atributo UserAgent do navegador. Em muitos casos, após o valor determinar o tipo de navegador, é necessário julgar a versão do navegador para lidar com o problema de compatibilidade. A versão do navegador geralmente pode ser conhecida analisando o usuário do usuário do navegador.
Vamos primeiro analisar as características de vários navegadores e seus usuários.
Ou seja
Somente o IE suporta a criação de controles ActiveX, então ela tem algo que outros navegadores não têm, que é a função ActiveXObject. Desde que você julgue que o objeto da janela possui uma função ActiveXObject, você pode determinar claramente que o navegador atual é IE. Os usuários típicos de cada versão do IE são os seguintes:
Mozilla/4.0 (compatível; MSIE 8.0; Windows NT 6.0)
Mozilla/4.0 (compatível; MSIE 7.0; Windows NT 5.2)
Mozilla/4.0 (compatível; MSIE 6.0; Windows NT 5.1)
Mozilla/4.0 (compatível; MSIE 5.0; Windows NT)
Entre eles, o número da versão é o número após o MSIE.
Firefox
Os elementos DOM no Firefox têm uma função getBoxObject para, que é usada para obter a posição e o tamanho do elemento DOM (a função GetBoundingClientRect correspondente ao IE). Isso é exclusivo do Firefox. Você pode dizer que o navegador atual é o Firefox. Os usuários de várias versões do Firefox são aproximadamente o seguinte:
Mozilla/5.0 (Windows; U; Windows NT 5.2) Gecko/2008070208 Firefox/3.0.1
Mozilla/5.0 (Windows; U; Windows NT 5.1) Gecko/20070309 Firefox/2.0.0.3
Mozilla/5.0 (Windows; U; Windows NT 5.1) Gecko/20070803 Firefox/1.5.0.12
Entre eles, o número da versão é o número após o Firefox.
Ópera
O Opera fornece um logotipo especial do navegador, que é a propriedade Window.OPERA. O usuário típico de ópera é o seguinte:
Opera/9.27 (Windows NT 5.2; U; ZH-CN)
Opera/8.0 (Macintosh; PPC Mac OS X; U; EN)
Mozilla/5.0 (Macintosh; PPC Mac OS X; U; EN) Opera 8.0
Entre eles, o número da versão é um número próximo à ópera.
Safári
Existe uma função de opendatabase no navegador Safari que outros navegadores não possuem, que podem ser usados como um sinalizador para julgar o Safari. Os usuários típicos do Safari são os seguintes:
Mozilla/5.0 (Windows; U; Windows NT 5.2) Applewebkit/525.13 (KHTML, como Gecko) Versão/3.1 Safari/525.13
Mozilla/5.0 (iPhone; U; CPU como Mac OS X) Applewebkit/420.1 (KHTML, como Gecko) Versão/3.0 Mobile/4A93 Safari/419.3
Seu número de versão é um número após a versão.
Cromo
O Chrome tem uma função da MessageEvent, mas o Firefox também o possui. Felizmente, o Chrome não possui a função GetBoxObject para o Firefox e pode ser julgado com precisão com base nessa condição. Atualmente, o usuário do Chrome é:
Mozilla/5.0 (Windows; U; Windows NT 5.2) Applewebkit/525.13 (KHTML, como Gecko) Chrome/0.2.149.27 Safari/525.13
Entre eles, o número da versão é somente após o Chrome.
Curiosamente, o UserAgent do Chrome também contém as características do Safari, talvez essa seja a base para o Chrome executar todos os aplicativos do navegador da Apple.
Enquanto entendermos as informações acima, podemos basear essas características no tipo de navegador e em sua versão. Salvaremos os resultados do julgamento no espaço de nome do sistema e nos tornaremos as informações básicas do logotipo da estrutura front-end para futuros programas a ler. Se você determinar o navegador, o espaço para nome SYS terá um atributo do nome do navegador e seu valor é o número da versão do navegador. Por exemplo, se o IE 7.0 for determinado, o valor do SYS.IE é 7,0; Se o Firefox 3.0 for determinado, o valor do Sys.Firefox é 3,0. Aqui está o código para determinar o navegador:
[Ctrl+A Selecione All Note: Se você precisar introduzir JS externo, precisará atualizar para executar]
Colocamos nosso julgamento no IE primeiro, porque o IE tem mais usuários, seguido pelo Firefox. Julgando o tipo de navegador na ordem dos usuários pode melhorar a eficiência do julgamento e fazer um trabalho menos inútil. A razão pela qual o Chrome é colocado em terceiro lugar é porque prevemos que o Chrome em breve se tornará o terceiro navegador com participação de mercado. Entre eles, ao analisar a versão do navegador, expressões regulares são usadas para dissecar as informações da versão.
Se o seu JavaScript for muito bom, você também pode escrever o código de julgamento anterior como este:
[Ctrl+A Selecione All Note: Se você precisar introduzir JS externo, precisará atualizar para executar]
Isso pode tornar o código JavaScript mais simplificado. Obviamente, a legibilidade é um pouco pior, depende se você valoriza a eficiência ou a manutenção.
O método de julgar os navegadores usando recursos diferentes é mais rápido do que analisar os usuários com expressões regulares, mas esses recursos podem variar com a versão do navegador. Por exemplo, se o recurso originalmente exclusivo de um navegador alcançará sucesso no mercado, outros navegadores também poderão adicionar esse recurso, fazendo com que o recurso exclusivo do navegador desapareça e fazendo com que nosso julgamento falhe. Portanto, uma abordagem relativamente segura é julgar o tipo de navegador analisando os recursos do usuário. Além disso, as informações da versão em julgamento exigem analisar o usuário agente do navegador.
Ao analisar as informações agentes do usuário de vários navegadores, não é difícil obter expressões regulares que distinguam vários navegadores e suas versões. Além disso, o julgamento do tipo e da versão do navegador pode ser feito em um. Então, podemos escrever o seguinte código:
[Ctrl+A Selecione All Note: Se você precisar introduzir JS externo, precisará atualizar para executar]
Entre eles, uma expressão de julgamento como "...? ...: ..." é usada para simplificar o código. A condição de julgamento é uma declaração de atribuição que não apenas completa a correspondência de expressões regulares e a cópia do resultado, mas também usa diretamente o julgamento condicional. As informações da versão subsequente só precisam ser extraídas dos resultados correspondentes anteriores, que é um código muito eficiente.
Os códigos acima são todos pré-pesquisas para criar uma estrutura front-end e testados e transmitidos em cinco navegadores principais. No futuro, você só precisa julgar um determinado navegador na forma de if (sys.ie) ou se (sys.firefox), e só precisa julgar a versão do navegador na forma de if (sys.ie == '8.0') ou se (sys.firefox == '3.0'), que ainda é muito elegante.
O projeto da estrutura front-end foi lançado, tudo depende do processo e dos resultados ...
O editor do Wulin.com resolveu alguns códigos para você:
A cópia do código é a seguinte:
VAR navegador = new Object ();
Browser.ismozilla = (typeof document.implementation! = 'Indefinido') && (typeof document.implementation.createCumocument! = 'Indefinido') && (typeof htmldocument! = 'Indefinido');
Navegador.isie = window.activexObject? Verdadeiro: falso;
Browser.isfirefox = (Navigator.UserAgent.TolowerCase (). Indexof ("Firefox")! =-1);
Browser.issafari = (Navigator.UserAgent.TolowerCase (). Indexof ("Safari")! =-1);
Browser.isopera = (Navigator.UserAgent.TolowerCase (). Indexof ("Opera")! =-1);
função check () {
alerta (navegador.isie? 'ie': 'não é');
alerta (navegador.isfirefox? 'Firefox': 'não firefox');
alerta (Browser.issafari? 'Safari': 'não safari');
alerta (Browser.isopera? 'Opera': 'não ópera');
}
window.onload = check;
A cópia do código é a seguinte:
função isBrowser () {
var sys = {};
var ua = navegator.UserAgent.TolowerCase ();
var s;
(s = ua.match (/msie ([/d. ]+)/))
(s = ua.match (/firefox // ([/d.]+)/))? sys.firefox = s [1]:
(s = ua.match (/chrome // ([/d.]+)/))? sys.chrome = s [1]:
(s = ua.match (/Ópera. ([/d.]+)/))? sys.opera = s [1]:
(s = ua.match (/versão // ([/d.]+).*Safari/))? Sys.safari = s [1]: 0;
if (sys.ie) {// js é julgado como o navegador do IE
alerta ('// www.vevb.com'+sys.ie);
if (sys.ie == '9.0') {// js é julgado como ie 9
} else if (sys.ie == '8.0') {// js é julgado como ie 8
}outro{
}
}
if (sys.firefox) {// js é julgado como navegador Firefox (Firefox)
alert ('// www.vevb.com'+sys.firefox);
}
if (sys.chrome) {// js é julgado como navegador do Google Chrome
alerta ('// www.vevb.com'+sys.chrome);
}
if (sys.opera) {// js é julgado como navegador de ópera
alerta ('// www.vevb.com'+sys.opera);
}
if (sys.safari) {// js é julgado como navegador Apple Safari
alerta ('// www.vevb.com'+sys.safari);
}
}
Compartilhe um método de função para obter o número do tipo de navegador e o número da versão do navegador através do jQuery. O código jQuery específico é o seguinte:
A cópia do código é a seguinte:
$ (document) .ready (function () {
varbrow = $. navegador;
varbinfo = "";
if (Brow.msie) {binfo = "Microsoft Intertexplorer"+Brow.version;}
if (Brow.mozilla) {binfo = "mozillafirefox"+Brow.version;}
if (Brow.safari) {binfo = "AppleSafari"+Brow.version;}
if (Brow.opera) {Binfo = "Opera"+Brow.version;}
alerta (binfo);
});
A partir da versão 1.9, o jQuery removeu $ .browser e $ .browser.version e o substituíram pelo método $ .support. Se você precisar entender $ .Support, consulte:
jQuery 1.9 Use $ .support em vez de $ .browser Method