En el desarrollo del sitio web front-end, los problemas de compatibilidad del navegador ya nos han hecho apresurarnos, y no sé cuántos problemas nos hará nacer. La compatibilidad del navegador es el primer problema que el marco de desarrollo frontal necesita resolver. Para resolver el problema de compatibilidad, primero debe determinar con precisión el tipo y la versión del navegador.
JavaScript es el lenguaje principal del desarrollo front-end. Podemos juzgar el tipo y la versión del navegador escribiendo programas JavaScript. Generalmente hay dos formas de juzgar los tipos de navegador en JavaScript. Una es distinguirlos en función de los atributos únicos de varios navegadores, y el otro es juzgar analizando el atributo de usuario del navegador. En muchos casos, después de que el valor determina el tipo de navegador, es necesario juzgar la versión del navegador para manejar el problema de compatibilidad. La versión del navegador generalmente se puede conocer analizando el usuario del navegador.
Primero analicemos las características de varios navegadores y sus usuarios.
ES DECIR
Solo IE admite la creación de controles ActiveX, por lo que tiene algo que otros navegadores no tienen, que es la función ActiveXObject. Mientras juzgue que el objeto de la ventana tiene una función ActiveXObject, puede determinar claramente que el navegador actual es, es decir. Los usuarios típicos para cada versión de IE son los siguientes:
Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.0)
Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 5.2)
Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1)
Mozilla/4.0 (compatible; MSIE 5.0; Windows NT)
Entre ellos, el número de versión es el número después de MSIE.
Firefox
Los elementos DOM en Firefox tienen una función GetBoxObjectFor, que se utiliza para obtener la posición y el tamaño del elemento DOM (la función GetBoundingClientRect correspondiente a IE). Esto es exclusivo de Firefox. Puedes decir que el navegador actual es Firefox. Los usuarios de varias versiones de Firefox son más o menos como sigue:
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 ellos, el número de versión es el número después de Firefox.
Ópera
Opera proporciona un logotipo especial del navegador, que es la propiedad Window.opora. UserAgent típico para Opera es el siguiente:
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 ellos, el número de versión es un número cercano a la ópera.
Safari
Hay una función OpenDatabase en el navegador Safari que otros navegadores no tienen, lo que puede usarse como una bandera para juzgar a Safari. Los usuarios típicos para Safari son los siguientes:
Mozilla/5.0 (Windows; U; Windows NT 5.2) AppleWebkit/525.13 (KHTML, como gecko) Versión/3.1 Safari/525.13
Mozilla/5.0 (iPhone; U; CPU como Mac OS X) AppleWebkit/420.1 (KHTML, como gecko) Versión/3.0 Mobile/4A93 Safari/419.3
Su número de versión es un número después de la versión.
Cromo
Chrome tiene una función MessageVent, pero Firefox también lo tiene. Afortunadamente, Chrome no tiene la función GetBoxObject para Firefox, y puede juzgarse con precisión en función de esta condición. Actualmente, el usuario de Chrome es:
Mozilla/5.0 (Windows; U; Windows NT 5.2) AppleWebkit/525.13 (khtml, como gecko) Chrome/0.2.149.27 Safari/525.13
Entre ellos, el número de versión es solo después de Chrome.
Curiosamente, el usuario de Chrome también contiene las características de Safari, tal vez esta es la base para que Chrome ejecute todas las aplicaciones de navegador de Apple.
Mientras comprendamos la información anterior, podemos basar estas características en el tipo de navegador y su versión. Guardaremos los resultados del juicio en el espacio de nombres del sistema y nos convertiremos en la información básica del logotipo del marco front-end para los programas futuros. Si determina el navegador, el espacio de nombres SYS tendrá un atributo del nombre del navegador, y su valor es el número de versión del navegador. Por ejemplo, si se determina IE 7.0, el valor de SYS.IE es 7.0; Si se determina Firefox 3.0, el valor de Sys.firefox es 3.0. Aquí está el código para determinar el navegador:
[Ctrl+A Seleccionar todo nota: si necesita introducir JS externo, debe actualizarse para ejecutar]
Ponemos nuestro juicio sobre IE primero, porque IE tiene la mayoría de los usuarios, seguido de Firefox. Juzgar el tipo de navegador en el orden de los usuarios puede mejorar la eficiencia del juicio y hacer un trabajo menos inútil. La razón por la cual Chrome se coloca en tercer lugar es porque predecimos que Chrome pronto se convertirá en el tercer navegador con cuota de mercado. Entre ellos, al analizar la versión del navegador, se utilizan expresiones regulares para diseccionar la información de la versión.
Si su JavaScript es muy bueno, también puede escribir el código de juicio anterior como este:
[Ctrl+A Seleccionar todo nota: si necesita introducir JS externo, debe actualizarse para ejecutar]
Esto puede hacer que el código JavaScript sea más optimizado. Por supuesto, la legibilidad es un poco peor, depende de si valora la eficiencia o la mantenibilidad.
El método para juzgar los navegadores que usan diferentes características es más rápido que analizar los usuarios con expresiones regulares, pero estas características pueden variar con la versión del navegador. Por ejemplo, si la característica única originalmente de un navegador ha logrado el éxito en el mercado, otros navegadores también pueden agregar esta característica, lo que hace que la característica única del navegador desaparezca y hace que nuestro juicio falle. Por lo tanto, un enfoque relativamente seguro es juzgar el tipo de navegador analizando las características en UserAgent. Además, juzgar la información de la versión requiere analizar el usuario del navegador.
Al analizar la información de usuario de varios navegadores, no es difícil obtener expresiones regulares que distinguen varios navegadores y sus versiones. Además, el juicio del tipo de navegador y la versión se puede hacer en uno. Entonces, podemos escribir el siguiente código:
[Ctrl+A Seleccionar todo nota: si necesita introducir JS externo, debe actualizarse para ejecutar]
Entre ellos, una expresión de juicio como "...? ...: ..." se usa para simplificar el código. La condición del juicio es una declaración de asignación que no solo completa la coincidencia de expresiones regulares y la copia del resultado, sino que también usa directamente el juicio condicional. La información de la versión posterior solo debe extraerse de los resultados coincidentes anteriores, que es un código muy eficiente.
Los códigos anteriores son todos preestablecidos para crear un marco front-end y probar y transmitir cinco navegadores principales. En el futuro, solo necesita juzgar un cierto navegador en forma de if (sys.ie) o if (sys.firefox), y solo necesita juzgar la versión del navegador en forma de if (sys.ie == '8.0') o if (sys.firefox == '3.0'), que aún es muy elegante para expresar.
Se ha lanzado el proyecto Front-end Framework, todo depende del proceso y los resultados ...
El editor de Wulin.com ha resuelto algunos códigos para usted:
La copia del código es la siguiente:
varilla var = nuevo objeto ();
Browser.ismezilla = (typeof document.implementation! = 'Undefined') && (typeof document.implementation.createDocument! = 'Undefined') && (typeOf htmlDocument! = 'Undefined');
Navegador.isie = window.activexObject? verdadero: falso;
Browser.isfirefox = (navigator.useragent.tolowercase (). IndexOf ("firefox")! =-1);
Navegador.issafari = (navigator.useragent.tolowercase (). IndexOf ("safari")! =-1);
Navegador.isopera = (navigator.useragent.tolowercase (). IndexOf ("ópera")! =-1);
función check () {
alerta (navegador.isie? 'ie': 'no es decir');
alerta (navegador.isfirefox? 'Firefox': 'no Firefox');
alerta (navegador.issafari? 'safari': 'no safari');
alerta (navegador.isopera? 'ópera': 'no ópera');
}
window.onload = check;
La copia del código es la siguiente:
función isbrowser () {
var sys = {};
var ua = navigator.useragent.tolowercase ();
var s;
(s = ua.match (/msie ([/d.font>+)/))?sys.ie=s§]:
(S = UA.Match (/Firefox // ([/d.]+)/))? Sys.firefox = S [1]:
(S = UA.Match (/Chrome // ([/d.]+)/))? Sys.Chrome = S [1]:
(S = UA.Match (/Opera. ([/d.]+)/))? Sys.OPERA = S [1]:
(S = UA.Match (/Version // ([/d.]+).*Safari/))? Sys.Safari = S [1]: 0;
if (sys.ie) {// js es juzgado como un navegador de IE
alerta ('// www.vevb.com'+sys.ie);
if (sys.ie == '9.0') {// js se juzga como IE 9
} else if (sys.ie == '8.0') {// js se juzga como IE 8
}demás{
}
}
if (sys.firefox) {// js es juzgado como navegador Firefox (Firefox)
alerta ('// www.vevb.com'+sys.firefox);
}
if (sys.chrome) {// js es juzgado como Google Chrome Browser
alerta ('// www.vevb.com'+sys.chrome);
}
if (sys.opora) {// js es juzgado como navegador de ópera
alerta ('// www.vevb.com'+sys.opora);
}
if (sys.safari) {// js es juzgado como navegador de safari de manzana
alerta ('// www.vevb.com'+sys.safari);
}
}
Comparta un método de función para obtener el tipo de navegador y el número de versión del navegador a través de jQuery. El código jQuery específico es el siguiente:
La copia del código es la siguiente:
$ (documento) .Ready (function () {
varbrow = $. navegador;
varbinfo = "";
if (brow.msie) {binfo = "Microsoft Internetexplorer"+brow.version;}
if (brow.mozilla) {binfo = "mozillafirefox"+brow.version;}
if (brow.safari) {binfo = "Applesafari"+brow.version;}
if (brow.opera) {binfo = "ópera"+brow.version;}
alerta (binfo);
});
A partir de la versión 1.9, JQuery eliminó $ .browser y $ .browser.version y lo reemplazó con el método $ .support. Si necesita comprender $ .support, consulte:
jQuery 1.9 use $ .support en lugar de $..