Cómo resolver conflictos js
①. Conflicto de nombres de variables
Las variables incluyen variables globales y variables locales. Las variables son iguales, se producirán conflictos JS, lo que provocará errores de JavaScript o incluso bucles infinitos debido a que se pasan diferentes valores o direcciones de variables.
②. Conflicto de nombre de método
Hay muchos métodos en la función y el mismo nombre de función puede aparecer entre diferentes js, lo que dificulta saber qué método llamar cuando el se ejecuta el programa. O el resultado de qué método se ejecuta, lo que en última instancia provoca que el programa no se cargue.
3. Conflicto de nombre de función
Generalmente llamado conflicto JS. La solución es averiguar si el js cargado tiene el mismo nombre y luego cambiar el nombre
b. conflicto de evento de carga
Si se llama a window.onload = function(). js, y al mismo tiempo llamar a la declaración onload en la página y el cuerpo hará que el evento window.onload sobrescriba el evento onload del cuerpo y cause un error.
Solución: Agregar las funciones requeridas para la carga en adjuntarEvent.
c. Problema de incompatibilidad del navegador. Aunque esto no es un conflicto de js, también es una de las razones comunes del problema de js
①document.form.item
( 1) Problemas existentes: hay muchas declaraciones como document.formName.item("itemName") en el código existente que no se pueden ejecutar en Fx
.
(2) Solución: utilice document.formName.elements["elementName"] en su lugar
②Colección de objetos
(1) Problemas: actual Hay muchos objetos colecciones en el código que usan (), que IE puede aceptar pero Fx no.
(2) Solución: utilice [] como operación de subíndice. Por ejemplo: document.forms ("formName") a document.forms ["formName"] . Otro ejemplo: document.getElementsByName("inputName") (1) a document.getElementsByName("inputName")
③window.event
(1) Problema: usar window .event no no funciona en Fx
(2) Solución: los eventos Fx solo se pueden usar en la escena donde ocurre el evento, por lo que este problema no se puede resolver temporalmente.
Aquí hay una solución alternativa:
Código original (funciona en IE):
Código:
...
función gotoSubmit() {
...
alert(window.event);
// Usar window.event
...
}
Nuevo código (funciona en IE y Fx):
Código:
onclick="javascript:gotoSubmit(event)"/> . .. función gotoSubmit(evt) { evt = evt ? evt : (ventana. evento ? ventana. evento: nulo); ... alert(evt); // Utilice evt .. p> } Además, si la primera línea del nuevo código sigue siendo la misma que la del código anterior (es decir, se llama a gotoSubmit sin argumentos) , solo se ejecutará en IE, pero sin el error. Por lo tanto, la parte tpl de esta solución sigue siendo compatible con el código anterior. ④ El problema de usar el ID del objeto HTML como nombre del objeto (1) Problema: en IE, el ID del objeto HTML se puede usar directamente como subordinado variable de objeto del nombre del documento. No es así en Fx. (2) Solución: utilice getElementById("idName") en lugar de idName como variable de objeto. ⑤ Problemas al obtener objetos a través de la cadena idName (1) Problemas existentes: en IE, el uso de eval(idName) puede obtener el objeto HTML con idName, pero en IE no es posible en Fx. (2) Solución: utilice getElementById(idName) en lugar de eval(idName). 6 El problema de que el nombre de la variable es el mismo que el id del objeto HTML (1) Problema: En Fx, ya que el id del objeto no se utiliza como nombre del HTML objeto, se puede utilizar el mismo nombre de variable que la identificación del objeto HTML, pero esto no se puede hacer en IE. (2) Solución alternativa: al declarar una variable, agregue siempre var para evitar ambigüedades y que funcione correctamente en IE. Además, es mejor no utilizar el mismo nombre de variable que el ID del objeto HTML para reducir errores. 7 Problemas de Event.x y event.y (1) Problemas existentes: en IE, el objeto de evento tiene propiedades x, y, pero no en Fx. (2) Solución: En Fx, event.x es equivalente a event.pageX, pero no existe event.pageX en IE. Por lo tanto, usamos event.clientX en lugar de event.x. event.clientX es ligeramente diferente de event.pageX (cuando hay barras de desplazamiento en la página), pero en su mayor parte son iguales. Para lograr exactamente lo mismo, puedes tener un poco de cuidado: mX = event.x ? event.x : event.pageX; Entonces usa mX en lugar de event.x (3) Otros: event.layerX es el mismo en IE y Fx, pero no he probado la diferencia entre los dos. 8 Acerca de los marcos (1) Problemas existentes: en IE, puedes usar window.testFrame para obtener el marco, pero no en Fx (2 )Solución: La principal diferencia entre Fx e IE en el uso de marcos es: si escribe los siguientes atributos en la etiqueta del marco: En este momento, es decir, puede acceder al objeto de ventana correspondiente al marco a través de id o nombre, mientras que Fx solo puede acceder al objeto de ventana correspondiente al marco a través del nombre. Por ejemplo, si la etiqueta de marco anterior está escrita en htm dentro de la ventana superior, puede acceder a ella de esta manera es decir: acceda al objeto de la ventana a través de window.top.frameId o window.top.frameName p > Fx: solo se puede acceder al objeto de ventana a través de window.top.frameName de esta manera Además, tanto Fx como ie pueden acceder a la etiqueta del marco usando window.top.document.getElementBox. document.getElementById("frameId") para acceder a la etiqueta del marco y cambiar el contenido del marco a través de window.top.document.getElementById("testFrame").src = 'xx.htm', o a través de window.top. frameName .location = 'xx.htm' para cambiar el contenido del marco 9 en Fx. Los atributos que usted mismo define deben pasarse a través de getAttribute() ⑩ En Fx, no hay parentElement parement.children, en su lugar use parentNode parentNode.childNodes subíndice childNodes. El significado es diferente en IE y Fx. Fx usa la especificación DOM e inserta nodos de texto en blanco en childNodes. Esto normalmente se puede evitar mediante node.getElementsByTagName(). Cuando faltan nodos en html, IE y Fx interpretan parentNode de manera diferente, por ejemplo:
form>
El valor de input.parentNode en Fx es formulario, mientras que el valor de input.parentNode en IE está vacío. .
En IE, el valor de input.parentNode es un nodo vacío
En Fx, el nodo no tiene un método removeNode, debes usar el siguiente método node.parentNode.removeChild (nodo)
d. problema const
(1) Problema existente: la palabra clave const no se puede utilizar en IE. Por ejemplo, constVar = 32; este es un error de sintaxis en IE.
(2) Solución:
. objeto del cuerpo
El cuerpo de Fx existe antes de que el navegador lea completamente la etiqueta del cuerpo, mientras que el cuerpo de IE debe existir después de que el navegador lo lea por completo. lee la etiqueta del cuerpo
.codificación .url
En js, si solo escribes la url sin escribir &, por ejemplo, var url = 'xx.jsp?objectName =xx& objectEvent= xxx';
frm.action = url, es posible que la URL no se muestre correctamente y que los parámetros sean incorrectos.
En el caso de Frm.action = url, es posible que la URL no se muestre correctamente y los parámetros no se puedan pasar correctamente al servidor. Problemas con nodeName y tagName
(1) Problema existente: en Fx, todos los nodos tienen valores de nodeName, pero textNode no tiene valores de tagName. Parece haber un problema con el uso de nodeName en IE
(No lo he probado, pero mi IE falló varias veces).
(2) Solución: use tagName, pero verifique si está vacío.
Atributos del elemento: el atributo input.type es un atributo de solo lectura en IE, pero se puede modificar en Fx
Problemas con document.getElementsByName() y document.all[ nombre]
(1)Problema existente: en IE, document.all[nombre] no se puede utilizar para obtener elementos div (no está claro si hay otros elementos que no se pueden obtener).