Un breve análisis de los problemas de compatibilidad del navegador en JavaScript

Los problemas de compatibilidad del navegador son una parte fácil de ignorar pero lo más importante en el desarrollo real. Antes de hablar sobre los problemas de compatibilidad de las versiones antiguas de los navegadores, primero debemos comprender qué es la detección de capacidades. Es para detectar si el navegador tiene tales capacidades, es decir, para determinar si el navegador actual admite los atributos o métodos a llamar. Aquí hay algunas breves presentaciones.

1. Inntext and InnerContent

1) Las funciones de inntext e innerContent son las mismas

2) Soporte de navegador de innertexto antes de IE8

3) InnerContent Old Version of Firefox Support

4) La nueva versión del navegador admite ambos métodos

 1 // La versión antigua de los navegadores es compatible con InnteText e InnerContent2 if (element.TextContent) {3 return element.TextContent; 4} else {5 return element.inntext; 6}

2. Obtenga problemas de compatibilidad de nodos/elementos hermanos

1) Nodos hermanos, todos los navegadores apoyan

①NextsiBling el próximo nodo hermano, que puede ser un nodo no elemental; Se obtendrá un nodo de texto

② Anterior Sitio El nodo hermano anterior puede ser un nodo no elemental; se obtendrá el nodo de texto

2) Elementos de hermano, IE8 no apoyaba antes

① Anterior elementos obtenga el siguiente elemento anterior hermano e ignora los espacios en blanco

②Textelementibling Obtenga el próximo elemento de hermanos adyacente e ignora los espacios en blanco

 // navegador compatible // Obtenga la siguiente función del elemento de hermanos getNextElement (elemento) {// detección de capacidad if (element.nextelementsibling) {return element.nextelementsibling; } else {var nodo = element.nextSibling; while (node ​​&& node.nodeType! == 1) {node = node.nextibling; } nodo de retorno; }}

 /*** Devuelve el elemento anterior*@param elemento*@returns {*}*/function getPreviousElement (elemento) {if (element.previousElementsIbling) {return Element.previousElementIbling; } else {var el = element.previousSibling; while (el && el.nodeType! == 1) {el = el.previoussibl; } return El; }}

 /*** Browser Compatible con el primer elemento FirstElementChild*@param parent*@returns {*}*/function getFirstelement (parent) {if (parent.firstelementchild) {return parent.firstelementchild; } else {var el = parent.firstchild; while (el && el.nodeType! == 1) {el = el.nextsibling; } return El; }}

 /*** Devuelva el último elemento*@param parent*@returns {*}*/function getLastelement (parent) {if (parent.lastelementChild) {return parent.lastelementChild; } else {var el = parent.lastchild; while (el && el.nodeType! == 1) {el = el.previoussibl; } return El; }}

 /*** Obtenga todos los elementos hermanos del elemento actual*@param elemento*@returns {array}*/function siBling (elemento) {if (! Element) return; VAR Elements = []; var el = element.previoussibling; while (el) {if (el.nodeType ==== 1) {Elements.push (el); } El = El.PreviousSibling; } el = element.previousSibling; while (el) {if (el.nodeType ==== 1) {Elements.push (el); } el = el.nextsibling; } el = element.previousSibling; } Elementos de retorno;}

3. Array.filter ();

// prueba todos los elementos con la función especificada y crea una nueva matriz que contiene todos los elementos que pasaron la prueba

 // Compatible con el entorno antiguo if (! Array.prototype.filter) {array.prototype.filter = function (diversh/ *, thateRg */) {"use strict"; if (this === void 0 || this === null) tire nuevo typeError (); var t = objeto (this); var len = t.length >>> 0; if (typeOf Fun! == "Función") tire nuevo typeError (); var res = []; var estaRarg = argumentos.length> = 2? argumentos [1]: nulo 0; for (var i = 0; i <len; i ++) {if (i in t) {var val = t [i]; // Nota: Técnicamente, esto debería objeto. DefineProperty AT // El siguiente índice, ya que Push puede verse afectado por // Propiedades en Object.Prototype y Array.Prototype. // pero ese método es nuevo, y las colisiones deben ser // raras, así que use la alternativa más compatible. if (divertir.call (thatesarg, val, i, t)) res.push (val); }} return Res; };}

4. Array.Foreach ();

// matriz de traver

 // Compatible con entornos antiguos // Pasos de producción de ECMA-262, Edición 5, 15.4.4.18// Referencia: http://es5.github.io/#x15.4.4.18if (! Array.prototype.Foreach) {array.prototype.foreach = function (llamado, thisarg) {var t, k; if (this == null) {tire nuevo typeError ('esto es nulo o no definido'); } // 1. Sea o el resultado de llamar a toObject () pasando el // | this | valor como argumento. var o = objeto (esto); // 2. Deje que LenValue sea el resultado de llamar al método get () interno // de o con el argumento "longitud". // 3. Deje que Len sea Touint32 (Lenvalue). var len = o.length >>> 0; // 4. Si es ISCALLABLE (devolución de llamada) es falso, arroje una excepción de TypeError. // Ver: http://es5.github.com/#x9.11 if (typeof Callback! == "function") {throw new typeError (Callback + 'no es una función'); } // 5. Si se suministró thantarg, sea thantOrg; de lo contrario, dejar // t no estar indefinido. if (argumentos.length> 1) {t = thatErg; } // 6. Sea K 0 K = 0; // 7. Repita, mientras k <len while (k <len) {var kValue; // a. Deje que PK sea tostring (k). // Esto está implícito para los operadores de LHS del operador In // b. Sea Kpresent el resultado de llamar a HasProperty // Método interno de O con argumento PK. // Este paso se puede combinar con c // c. Si Kpresent es verdadero, entonces if (k in o) {// i. Deje que Kvalue sea el resultado de llamar al método Get Internal // de O con el argumento PK. kvalue = o [k]; // ii. Llame al método interno de devolución de llamada con t AS // La lista de valor y argumentos que contiene Kvalue, K y O. Callback.call (T, Kvalue, K, O); } // d. Aumentar k por 1. K ++; } // 8. Return indefinido};}

5. Evento de registro

.adDeventListener = function (type, oyente, useCapture) {};

// El primer nombre del evento de parámetro

// La segunda función de controlador de eventos de parámetros (oyente)

// El tercer parámetro verdadero captura burbuja falsa

// Solo será compatible después de IE9

// Compatible con entornos antiguos

 var eventTools = {addEventListener: function (elemento, eventName, oyente) {// detección de capacidad if (element.addeventListener) {element.addeventListener (eventName, oyente, falso); } else if (element.attachevent) {element.attachevent ("on" + eventname, oyente); } else {elemento ["en" + eventName] = oyente; }}, // Si desea eliminar eventos, no puede usar la función anónima removeventListener: function (element, eventName, oyente) {if (element.removeEventListener) {element.removeVentListener (eventName, oyente, falso); } else if (element.detachevent) {// ie8 antes de registrarse. } else {elemento ["en" + eventName] = null; }}};

6. Objeto de evento

1) El parámetro del evento E es el objeto de evento, el método de adquisición estándar

btn.OnClick = function (e) {}

2) E.EventPhase Event Stage, IE8 no lo admitió antes

3) E.Target es siempre el objeto que desencadena el evento (botón haciendo clic)

i) Antes de IE8 SrCelement

ii) Compatible del navegador

Var Target = E.Target || Window.Event.SrCelement;

 // Obtener objeto de evento compatible con el navegador getEvent: function (e) {return e || Window.event; // forma estándar de obtener el objeto de evento E; ventana. E.Sracelement; }

7. Obtenga la posición del mouse en la página

① Posición en el área visual: E.Clientx e.clienty

② Ubicación en el documento:

i) E.Pagex E.Pagey

ii) Compatible del navegador

 var scrollTop = document.documentelement.scrolltop || document.body.scrolltop; var pagey = e.clienty + scrolltop;

8. Obtenga la distancia para desplazarse

 // navegador compatible var scrolltop = document.documentelement.scrolltop || document.body.scrolltop;

9. Cancelar la selección de texto

 // compatible con la ventana del navegador. Window.getSelection (). removealLranges (): document.selection.empty ();

[Resumen] Este es solo un resumen parcial, y también encontrará varios problemas de compatibilidad del navegador durante el desarrollo real. Diferentes navegadores también encontrarán diferentes problemas de adaptación en la PC y los teléfonos móviles. Están esperando que los zapatos de los niños descubran y resuman ~~ Espero que pueda ayudarlo. Por favor dame algunos consejos sobre las deficiencias ~~~

El breve análisis anterior de los problemas de compatibilidad de los navegadores en JavaScript es todo el contenido que comparto con usted. Espero que pueda darle una referencia y espero que pueda apoyar más a Wulin.com.