Este artículo resume y analiza problemas de compatibilidad comunes en JavaScript en los navegadores IE y Firefox. Compártelo para su referencia, como sigue:
Forma
document.formname.item ("itemname")Es decir: puede usar document.formname.item ("itemname") o document.formname.elements ["ElementName"]
Firefox: solo document.FormName.Elements ["ElementName"]
Solución: use document.formname.elements ["ElementName"]
Objetos de clase de recolección
Es decir: puedes usar () o [] para obtener objetos de clase de recolección;
Firefox: solo use [] para obtener objetos de clase de recolección.
Solución: Use [] para obtener objetos de clase de recolección de manera unificada.
Propiedades personalizadas
Es decir: puede usar el método para obtener atributos regulares para obtener atributos personalizados, o puede usar getattribute () para obtener atributos personalizados
Firefox: solo puede usar getAttribute () para obtener propiedades personalizadas.
Solución: Obtenga uniformemente atributos personalizados a través de getAttribute ().
Adquisición de elementos
eval ("idname")Es decir: puede usar eval ("idname") o getElementById ("idname") para obtener el objeto HTML con IdName;
Firefox: solo puede usar GetElementById ("IdName") para obtener objetos HTML con IdName con IdName.
Solución: use GetElementById ("IdName") para obtener el objeto HTML con ID como idname.
Nombramiento duplicado
Problema con el mismo nombre de variable que una determinada ID de objeto HTML
Es decir: la ID del objeto HTML se puede usar directamente como el nombre de la variable del objeto subordinado del documento, pero no se puede usar en Firefox;
Firefox: puede usar el mismo nombre de variable que la ID de objeto HTML, pero no puede en IE.
Solución alternativa: use document.getElementById ("idname") en lugar de document.idname. Es mejor no tomar nombres de variables con la misma ID de objeto HTML para reducir los errores; Al declarar variables, agregue VAR para evitar la ambigüedad.
estúpido
Es decir: solo use la palabra clave var para definir variables.
Firefox: puede usar la palabra clave const o la palabra clave var para definir variables.
Solución: use la palabra clave VAR para definir variables de manera uniforme.
Entrada. Type
Input. Problema de atributos de type
Es decir: el atributo de type de entrada es de solo lectura.
Firefox: el atributo de type de entrada se lee y escribe.
ventana. Evento
Window.Event solo puede funcionar bajo IE, no en Firefox, porque el evento de Firefox solo se puede usar en la escena donde ocurre el evento.
Firefox: el evento debe agregarse desde la fuente para el paso de los parámetros. IE ignora este parámetro y usa Window.event para leer el evento.
Solución:
<script language = "javaScript"> function divers (e) {e = e? E: (Window.event? Window.event: NULL); } </script>event.x y event.y
Descripción: En IE, el objeto uniforme tiene atributos X e Y, pero no tiene atributos Pagex y Pagey; Bajo Firefox, el objeto uniforme tiene atributos Pagex y Pagey, pero no tiene atributos X e Y.
Solución: use mx (mx = event.x? Event.x: event.pagex;) en lugar de event.x en IE o event.pagex en Firefox.
evento.
Es decir: El objeto de evento tiene una propiedad de CicLeement, pero no tiene una propiedad objetivo;
Firefox: Incluso el objeto tiene una propiedad objetivo, pero no hay propiedad de Cicelement.
Solución: use obj (obj = event.srcelement? Event.srcelement: event.target;) en lugar de event.srcelement en IE o event.target bajo Firefox. También preste atención a los problemas de compatibilidad del evento.
window.location.href
IE o Firefox2.0.x: puede usar Window.location o Window.location.href;
Firefox1.5.x: solo se utiliza la ubicación.
Solución alternativa: use Window.location en lugar de Window.location.href.
Ventanas modales y no modales
Es decir: ventanas modales y no modales se pueden abrir a través de showmodaldialog y showmodelessdialog
Firefox: ¡No!
Solución: use Window.open (PageUrl, nombre, parámetros) para abrir una nueva ventana.
Si necesita pasar parámetros en la ventana infantil de regreso a la ventana principal, puede usar la ventana. Por ejemplo: var parwin = window.opener; parwin.document.getElementById ("aqing"). Valor = "aqing";
marco
El siguiente cuadro es un ejemplo:
<Frame src = "xxx.html" id = "frameID" name = "franameame" />
1. Acceda al objeto de cuadro:
[El objeto devuelto en IE es objeto, y el tipo específico se mostrará en ff, como: ventana del objeto]
Es decir: use window.frameid o window.framename para acceder a este objeto de cuadro. FrameId y Framename pueden tener el mismo nombre.
Firefox: solo Window.framename se puede usar para acceder a este objeto de cuadro.
Tanto en IE como en Firefox, puede usar Window.document.getElementById ("FrameId") para acceder a este objeto de cuadro.
2. Contenido de marco de interruptor:
Tanto en IE como en Firefox, puede usar Windows.document.getElementById ("testframe"). Src = "xxx.html" o window.framename.location = "xxx.html" para cambiar el contenido de la trama.
Si necesita pasar los parámetros en el marco de regreso a la ventana principal (tenga en cuenta que no es un abridor, sino un marco principal), puede usar el padre en el marco para acceder a la ventana principal. Por ejemplo: parent.document.form1.filename.value = "a";
Cuerpo
Es decir: el cuerpo debe existir después de que el navegador lee completamente la etiqueta del cuerpo.
Firefox: el cuerpo existe antes de que el navegador lea completamente la etiqueta del cuerpo.
Método de delegación de eventos
Es decir: la copia del código es la siguiente: document.body.onload = inject; // La función inyect () se ha implementado antes de esto
Firefox: la copia del código es la siguiente: document.body.onload = inject ();
Elemento principal
La diferencia entre Firefox y el elemento principal de IE (ParentElement)
Es decir: obj.parentelement
Firefox: OBJ.ParentNode
Solución: Debido a que tanto Firefox como IE admiten DOM, usar obj.parentnode es una buena opción.
Cursor de puntero del mouse
Cursor: Hand Vs Cursor: Pointer
Firefox: no es compatible con la mano
Es decir: soporte puntero
Solución: use el puntero de manera uniforme
Texto de contenido
Innertext funciona normalmente en IE. Sin embargo, InnteText no funciona en Firefox, se requiere TextContent.
Solución:
if (navigator.appname.indexof ("explorer")> -1) {document.getElementById ('elemento'). inNTEXT = "mi texto"; } else {document.getElementById ('elemento'). TextC; }Operación en la mesa
Es decir, Firefox y otros navegadores tienen diferentes operaciones en las etiquetas de la tabla. En IE, no está permitido asignar valores internos a la tabla y tr. Cuando se usa JS para agregar un TR, el método AppendChild no es útil.
Solución:
// Agregar una línea en blanco a la tabla: var fila = otable.insertrow (-1); var celular = document.createElement ("td"); celular.innerhtml = ""; celular.classname = "A"; fila.appendChild (celda);colección de opciones
Operación de la colección de opciones en seleccionar
Además de [], selectName.options.Item () también es posible. Además, selectName.options.length, selectName.options.Add/Eliminar se puede usar en ambos navegadores.
*Tenga en cuenta que el elemento se asigna después de agregar, de lo contrario fallará.
Xmlhttp
if (window.xmlhttprequest) {xmlhttp = new xmlhttprequest (); } else if (window.activexObject) {// código para IE xmlhttp = new ActiveXObject ("Microsoft.xmlhttp"); } if (xmlhttp) {xmlhttp.onreadyStateChange = xmlhttpchang; xmlhttp.open ("get", url, verdadero); xmlhttp.send (); }For more information about JavaScript related content, please check out the topics of this site: "Summary of JavaScript Errors and Debugging Skills", "Summary of JavaScript Mathematical Operation Usage", "Summary of JSON Operation Skills in JavaScript", "Summary of JavaScript Switching Special Effects and Skills", "Summary of JavaScript Search Algorithm Skills", "Summary of JavaScript Animation Special Effects and Habilidades "," Resumen de las estructuras de datos de JavaScript y las habilidades de algoritmo "y" Resumen del algoritmo y habilidades transversales de JavaScript "
Espero que este artículo sea útil para la programación de JavaScript de todos.