La compatibilidad de JavaScript ha sido durante mucho tiempo un problema importante para los desarrolladores web. Las diferencias entre las especificaciones formales, los estándares objetivos y diversas implementaciones han provocado que muchos desarrolladores sufran día y noche. Con este fin, la compatibilidad de JavaScript de IE y Firefox se resume principalmente de las siguientes diferencias:
La copia del código es la siguiente:
1. Diferencias entre funciones y métodos;
2. Acceso y configuración de estilo;
3. Método DOM y referencia de objeto;
4. Manejo de eventos;
5. Tratamiento de compatibilidad para otras diferencias.
1. Diferencias entre funciones y métodos
1. Método getyear ()
[Instrucciones de análisis] Echemos un vistazo al siguiente código:
La copia del código es la siguiente:
var año = nueva fecha (). getyear ();
document.write (año);
La fecha que obtienes en IE es "2010", y la fecha que ves en Firefox es "110", principalmente porque en Firefox getyear devuelve el valor del "año actual-1900 actual".
【Procesamiento de compatibilidad】 Agregar a juzgar el año, como:
La copia del código es la siguiente:
var año = nueva fecha (). getyear ();
año = (año <1900? (1900+año): año);
document.write (año);
También puede llamarlo a través de Getfulfyear GetUtcleflear:
La copia del código es la siguiente:
var año = new Date (). GetFloyear ();
document.write (año);
2. Función eval ()
[Nota de análisis] En IE, puede usar eval ("idname") o getElementById ("idname") para obtener objetos HTML con IdName; En Firefox, solo puede usar GetElementById ("IdName") para obtener objetos HTML con IdName.
[Procesamiento de compatibilidad] Use getElementById ("idname") para obtener el objeto HTML con IdName con IdName.
3. Declaración constante
[Nota de análisis] La palabra clave const no se puede usar en IE. como:
La copia del código es la siguiente:
const constvar = 32;
En IE, este es un error de sintaxis.
【Procesamiento compatible】 No use const, use VAR en su lugar.
4. Var
[Instrucciones de análisis] Consulte el siguiente código:
La copia del código es la siguiente:
echo = function (str) {
document.write (str);
}
Esta función se ejecuta normalmente en IE, pero se informó un error bajo Firefox.
[Procesamiento compatible] Es normal agregar var antes del eco, y este es el propósito de nuestra mención de var.
5. Problema de constante
[Nota de análisis] La palabra clave const no se puede usar en IE. Por ejemplo, const constvar = 32; En IE, este es un error de sintaxis.
【Solución】 No use const, use VAR en su lugar.
2. Acceso y configuración de estilo
1. El atributo "flotador" de CSS
[Nota de análisis] La sintaxis más básica para JavaScript para acceder a un valor CSS dado es: Object.Style.Property, pero algunas propiedades de CSS son las mismas que los nombres de palabras reservados en JavaScript, como "flotador", "para", "clase", etc., y los métodos de escritura son diferentes de diferentes navegadores.
En es decir, escribe esto:
La copia del código es la siguiente:
document.getElementById ("encabezado"). style.stylefloat = "izquierda";
En Firefox, escribe esto:
La copia del código es la siguiente:
document.getElementById ("Header"). style.cssfloat = "izquierda";
[Procesamiento de compatibilidad] Agregue un juicio antes de escribir para determinar si el navegador es es decir:
La copia del código es la siguiente:
if (document.all) {//
document.getElementById ("encabezado"). style.stylefloat = "izquierda";
}
más {// indefinido cuando no es, es decir
document.getElementById ("Header"). style.cssfloat = "izquierda";
}
2. Acceso "For" en la etiqueta <Lelicta>
[Nota de análisis] Al igual que el atributo "flotante", también requiere el uso de distinción de sintaxis invisible para acceder "para" en la etiqueta <Lelicta>.
En es decir, escribe esto:
La copia del código es la siguiente:
var myObject = document.getElementById ("myLabel");
var myattribute = myObject.getAttribute ("htmlfor");
En Firefox, escribe esto:
La copia del código es la siguiente:
var myObject = document.getElementById ("myLabel");
var myattribute = myObject.getAttribute ("for");
[Procesamiento de compatibilidad] La solución es determinar primero el tipo de navegador.
3. Acceso y establece propiedades de clase
[Nota de análisis] También porque la clase es palabras reservadas de JavaScript, estos dos navegadores utilizan diferentes métodos de JavaScript para obtener esta propiedad.
Cómo escribir todas las versiones de IE antes de IE8.0:
La copia del código es la siguiente:
var myObject = document.getElementById ("encabezado");
var myattribute = myObject.getAttribute ("classname");
Aplicable a IE8.0 y Firefox Writing:
La copia del código es la siguiente:
var myObject = document.getElementById ("encabezado");
var myattribute = myObject.getAttribute ("clase");
Además, al configurar el atributo de clase usando setAttribute (), los dos navegadores también tienen la misma diferencia.
La copia del código es la siguiente:
setAttribute ("classname", valor);
Este método de escritura es aplicable a todas las versiones de IE antes de IE8.0. Nota: IE8.0 no admite el atributo "ClassName".
setAttribute ("clase", valor); es adecuado para IE8.0 y Firefox.
【Procesamiento compatible】
Método 1, escriba ambos:
La copia del código es la siguiente:
var myObject = document.getElementById ("encabezado");
myObject.setAttribute ("clase", "classValue");
myObject.SetAttribute ("classname", "classValue");
// Establecer la clase de encabezado en classvalue
Método 2: IE y FF Support Object.Classname, para que pueda escribirlo así:
La copia del código es la siguiente:
var myObject = document.getElementById ("encabezado");
myObject.classname = "classValue"; // Establecer la clase de encabezado en classValue
Método 3: Primero juzga el tipo de navegador y luego use el método de escritura correspondiente de acuerdo con el tipo de navegador.
4. Problema de asignación de ancho y altura del objeto
[Nota de análisis] La declaración similar a obj.style.height = imgobj.Height in firefox no es válida.
【Procesamiento compatible】 use obj.style.height = imgobj.height + 'px';
5. Agregue estilos
[Nota de análisis] En IE, use el método addrule () para agregar estilos, como: stylesheet.addrule ("p", "color: #ccc", stylesheet.length). Sin embargo, este método no es compatible con FF y usa el método insetrule () para reemplazarlo en FF. Como stylesheet.insertule ("p {color: #ccc}", stylesheet.length).
【Procesamiento compatible】
La copia del código es la siguiente:
if (stylesheet.insertule) {
// método insertRule ()
}demás{
// método addrule ()
}
6. Estilo final
[Nota de análisis] A veces, nuestros estilos personalizados fallarán porque se produce una superposición de estilo, como el estilo definido por un selector de clase y el estilo definido por un selector de etiquetas, y este último no es válido en este momento. Entonces el estilo final debe usarse. El estilo final en IE está escrito como Ele.CurrentStyle. Nombre del atributo. El método de escritura estándar en DOM es usar el objeto document.defaultView, como document.defaultView.getComputedStyle (elel, null), que es compatible con FF.
[Procesamiento de compatibilidad] Primero juzga el navegador (document.all) y luego ejecute el método anterior.
3. Método DOM y referencia de objetos
1. GetElementByid
[Instrucciones de análisis] Echemos un vistazo a un conjunto de códigos:
<!-Acceso de objeto de entrada 1->
La copia del código es la siguiente:
<input id = "id" type = "botón"
value = "Click Me" ōnclick = "alerta (id.value)"/>
En Firefox, el botón no responde, en IE, está bien, porque para IE, la ID de un elemento HTML puede usarse directamente como un nombre variable en el script, pero no en Firefox.
[Procesamiento de compatibilidad] Intente usar la escritura DOM W3C. Al acceder a los objetos, use document.getElementById ("ID") para acceder al objeto con ID, y una ID debe ser única en la página. Además, al acceder a los objetos con un nombre de etiqueta, use document.getElementsBytagName ("div") [0]. Este método es compatible con más navegadores.
<!-Acceso de objeto de entrada 2->
La copia del código es la siguiente:
<input id = "id" type = "button" value = "haga clic en mí"
onClick = "alert (document.getElementById ('id'). valor)" />
2. Acceso de objeto de clase de recolección
[Nota de análisis] En IE, puede usar () o [] para obtener el objeto de clase de recolección; Bajo Firefox, solo puede usar [] para obtener el objeto de clase de recolección. como:
document.write (document.forms ("formname"). src);
// Este método de escritura puede acceder al atributo SCRC del objeto de formulario en IE
【Procesamiento de compatibilidad】 Cambiar documento.Forms ("FormName") a document.forms ["FormName"]. Use [] para obtener objetos de clase de recolección de manera unificada.
3. Referencia del marco
[Nota de análisis] es decir, puede acceder al objeto de la ventana correspondiente a este marco a través de ID o nombre, mientras que Firefox solo puede acceder al objeto de la ventana correspondiente a este cuadro a través del nombre.
Por ejemplo, si la etiqueta de cuadro anterior está escrita en el HTM en la ventana superior, puede acceder a ella así:
Es decir: window.top.frameid o window.top.framename para acceder a este objeto de ventana;
Firefox: Only Window.top.framename se puede usar para acceder a este objeto de ventana.
【Procesamiento compatible】 Use el nombre del cuadro para acceder a los objetos de cuadro. Además, tanto IE como Firefox se pueden usar para hacer
Window.document.getElementById ("FrameId") para acceder a este objeto de cuadro.
4. Parentralement
[Descripción del análisis] IE admite el uso de ParentElement y ParentNode para obtener nodos parentales. Firefox solo puede usar ParentNode.
[Procesamiento de compatibilidad] Debido a que tanto Firefox como IE admiten DOM, ParentNode se usa para acceder al nodo principal.
5. Operación de tabla
[Nota de análisis] En la tabla bajo IE, ya sea que se inserta con InnerHTML o AppendChild, no tiene ningún efecto, pero otros navegadores lo muestran normalmente.
[Procesamiento compatible] La solución es agregar <tr> al elemento <tbody> de la tabla, como se muestra a continuación:
La copia del código es la siguiente:
var fila = document.createElement ("tr");
var celular = document.createElement ("td");
var cell_text = document.createTextNode ("Contenido insertado");
Cell.AppendChild (Cell_Text);
fila.appendChild (celda);
document.getElementsBytagName ("tbody") [0] .AppendChild (fila);
6. Retire los nodos remOVOVODEDE () y retiros ()
[Nota de análisis] AppendNode se puede usar normalmente en IE y Firefox, pero Removenode solo se puede usar en IE.
La función del método RemoVoLode es eliminar un nodo, con la sintaxis que es node.remoVeLe (false) o node.remoVeNode (true), y el valor de retorno es el nodo eliminado.
Removenode (falso) significa que solo se elimina el nodo especificado, y luego el nodo secundario original de este nodo se promueve al nodo secundario del nodo principal original.
Removenode (verdadero) significa eliminar el nodo especificado y todos sus nodos subordinados. El nodo eliminado se convierte en un nodo huérfano y ya no tiene un nodo secundario y un nodo principal.
[Procesamiento de compatibilidad] Los nodos en Firefox no tienen un método de removenida, por lo que solo pueden ser reemplazados por el método RemoVeChild. Primero vuelva al nodo principal y retire el nodo que se eliminará del nodo principal.
node.parentnode.removechild (nodo);
// Para usar tanto IE como Firefox normalmente, tome el nodo principal de la capa anterior y luego retire.
7. Nodos obtenidos por nodos de niños
[Nota de análisis] El significado del subíndice de los nodos de los niños es diferente en IE y Firefox. Echemos un vistazo al siguiente código:
La copia del código es la siguiente:
<ul id = "main">
<li> 1 </li>
<li> 2 </li>
<li> 3 </li>
</ul>
<Entrada tipo = value de botón = "¡Haz clic en mí!" onClick =
"alerta (document.getElementById ('main'). ChildNodes.length)">
Corriendo con IE y Firefox respectivamente, el resultado de IE es 3, mientras que Firefox es 7. Firefox usa la especificación DOM, y "#Text" significa que el texto (en realidad espacios sin sentido y saltos de línea, etc.) también se analizará en un nodo en Firefox. En IE, solo el texto con significado práctico se analizará en "#Text".
【Procesamiento compatible】
Método 1: Al obtener nodos infantiles, puede evitar este problema por node.getElementsByTagName (). Sin embargo, GetElementsBytagName obviamente no es tan bueno como usar nodos de niños para atravesar estructuras DOM complejas, porque los nodos de los niños pueden manejar mejor la jerarquía DOM.
Método 2. En uso real, cuando Firefox atraviesa nodos infantiles, también podría agregarlo al bucle for:
if (childNode.nodeName == "#text") continúa; // o usa nodetype == 1.
Esto le permite omitir algunos nodos de texto.
Lectura adicional
"Diferencia entre los niños en IE y Firefox"
8. Firefox no puede soportar inntext.
[Nota de análisis] Firefox no es compatible con InnteText, es compatible con TextContent para implementar InnteText, pero TextContent no considera elementos como InnteText, por lo que no es completamente compatible con IE. Si no usa TextContent, la cadena no contiene código HTML, que también puede ser reemplazado por InnerHTML. También puede escribir un método para implementarlo, consulte el artículo "Implementación del atributo de innertext para Firefox".
【Compare el procesamiento】 Compare juzgando el tipo de navegador:
La copia del código es la siguiente:
if (document.all) {
document.getElementById ('Element'). Innertext = "My Text";
} demás{
document.getElementById ('Element'). TextContent = "My Text";
}
4. Manejo de eventos
Si el procesamiento de eventos está involucrado cuando se usa JavaScript, debe conocer las diferencias entre eventos en diferentes navegadores. Hay tres modelos de eventos JavaScript principales (ver "Admitiendo tres modelos de eventos a la vez", que son NN4, IE4+ y W3C/Safar.
1. Ventana. Evento
【Instrucciones de análisis】 Mire primero una pieza de código
La copia del código es la siguiente:
función et ()
{
alerta (evento); // es decir: [objeto]
}
El resultado del código anterior que se ejecuta en IE es [objeto], pero no se puede ejecutar en Firefox.
Debido a que el evento se puede usar directamente como una propiedad de un objeto de ventana en IE, pero en Firefox, se usa el modelo W3C, que propaga eventos a través del método de aprobación de parámetros, es decir, debe proporcionar una interfaz de respuesta de evento para su función.
[Procesamiento de compatibilidad] Agregue el juicio del evento y obtenga el evento correcto de acuerdo con el navegador:
La copia del código es la siguiente:
función et ()
{
evt = evt? Evt: (Window.event? Window.event: null);
// Compatible con IE y Firefox
alerta (EVT);
}
2. Adquisición del valor del teclado
[Nota de análisis] Los métodos para obtener valores de teclado de IE y Firefox son diferentes. Se puede entender que el evento, que bajo Firefox, es equivalente al evento. Para las diferencias de los demás, consulte "Prueba de compatibilidad para el código de teclas, que y encarcelado en eventos de teclado"
【Procesamiento compatible】
La copia del código es la siguiente:
Funcionar myKeyPress (EVT) {
// Compatible con IE y Firefox para obtener el objeto de eventos de teclado
EVT = (EVT)? EVT: ((Window.event)? Window.event: "")
// Compatible con IE y Firefox para obtener el valor de tecla del objeto TeyboardEvent
var key = evt.keycode? Evt.KeyCode: evt.whhch;
if (evt.ctrlkey && (key == 13 || key == 10)) {
// ctrl y enter se presionaron al mismo tiempo
// hacer algo;
}
}
3. Obtener fuente de eventos
[Nota de análisis] Al usar delegados de eventos, podemos determinar de qué elemento proviene el evento a través de la adquisición de la fuente del evento. Sin embargo, en IE, el objeto del evento tiene una propiedad de Cicelement, pero no hay propiedad objetivo; En Firefox, el objeto uniforme tiene una propiedad objetivo, pero no hay propiedad de Cicelement.
【Procesamiento compatible】
La copia del código es la siguiente:
ele = function (evt) {// captura el objeto que el evento actual está actuando
evt = evt || window.event;
Devolver
(obj = Event.SrCelement? Event.srcelement: Event.target;);
}
4. Monitoreo de eventos
[Nota de análisis] En términos de escucha y procesamiento de eventos, IE proporciona dos interfaces: adjunta de eventos y separados, mientras que Firefox proporciona AddEventListener y RemoLEventListener.
[Procesamiento de compatibilidad] El procesamiento de compatibilidad más simple es encapsular estos dos conjuntos de interfaces:
La copia del código es la siguiente:
función addEvent (elem, eventname, handler) {
if (elem.attachevent) {
elem.attachevent ("on" + eventname, function () {
handler.call (elem)});
// Use la función de devolución de llamada Llame () aquí, deje que este punto sea ELEM
} else if (elem.addeventListener) {
Elem.addeventListener (EventName, Handler, False);
}
}
Función RemoLeVent (Elem, EventName, Handler) {
if (elem.detachevent) {
elem.detachevent ("on" + eventname, function () {
handler.call (elem)});
// Use la función de devolución de llamada Llame () aquí, deje que este punto sea ELEM
} else if (elem.removeEventListener) {
elem.removeEventListener (EventName, Handler, False);
}
}
Cabe señalar que bajo Firefox, esto en el evento de manejo de eventos apunta al elemento escuchado en sí, pero en IE, puede usar la llamada de función de devolución de llamada para que el contexto actual apunte al elemento escuchado.
5. Posición del mouse
[Nota de análisis] En IE, el objeto uniforme tiene atributos X e Y, pero no hay atributos Pagex y Pagey; Bajo Firefox, el objeto uniforme tiene atributos Pagex y Pagey, pero no hay atributos X e Y.
[Procesamiento de compatibilidad] Use mx (mx = event.x? Event.x: event.pagex;) para reemplazar event.x en IE o event.pagex en Firefox. La posición absoluta debe considerarse en puntos complejos
La copia del código es la siguiente:
función getabSpoint (e) {
var x = e.offsetleft, y = e.offsettop;
while (e = e.offsetParent) {
x += e.offsetleft;
y += e.offsettop;
}
alerta ("x:" + x + "," + "y:" + y);
}
5. Tratamiento de compatibilidad de otras diferencias
1. Xmlhttprequest
[Nota de análisis] nuevo ActiveXObject ("Microsoft.xmlhttp"); Solo funciona en IE. Firefox no lo admite, pero admite xmlhttprequest.
【Procesamiento compatible】
La copia del código es la siguiente:
función createExhr () {
var xhr = null;
if (window.xmlhttprequest) {
xhr = new ActiveXObject ("msxml2.xmlhttp");
}demás{
intentar {
xhr = new ActiveXObject ("Microsoft.xmlhttp");
}
atrapar() {
xhr = nulo;
}
}
if (! xhr) return;
regresar xhr;
}
2. Windows modal y no modal
[Nota de análisis] En IE, las ventanas modales y no modales se pueden abrir a través de ShowModaldialog y ShowModelessdialog, pero Firefox no las admite.
[Solución] Use Window.open (PageUrl, Nombre, Parámetros) para abrir una nueva ventana. Si necesita pasar parámetros, puede usar Frame o iframe.
3. Problema de atributos de type.
La propiedad de type de entrada en IE es de solo lectura, pero se puede modificar bajo Firefox.
4. Operación de opción en el elemento seleccionar
Las opciones establecidas, es decir, Firefox se escriben de manera diferente:
Firefox: se puede configurar directamente
La copia del código es la siguiente:
opción.text = 'fooooooooo';
Es decir: solo establecido
La copia del código es la siguiente:
opción.innerhtml = 'fooooooo';
Método para eliminar una opción Seleccionar:
Firefox: Sí
La copia del código es la siguiente:
select.options.remove (selectedIndex);
IE7: se puede usar
La copia del código es la siguiente:
select.options [i] = null;
IE6: Necesito escribir
La copia del código es la siguiente:
select.options [i] .outerhtml = null;
5. Análisis de objetos IMG alt y título
[Nota de análisis] El objeto IMG tiene dos atributos: ALT y Título. La diferencia es que ALT: un mensaje cuando la foto no existe o la carga es incorrecta.
Título: La descripción del consejo de la foto. Si el título no se define en IE, ALT también se puede usar como la punta de IMG, pero en Firefox, ambos se usan exactamente de acuerdo con la definición en el estándar.
Al definir un objeto IMG.
[Procesamiento compatible] Es mejor escribir todos los objetos ALT y título para garantizar que puedan usarse normalmente en varios navegadores.
6. Problema de actualización SRC de IMG
[Instrucciones de análisis] Echemos un vistazo al código primero:
La copia del código es la siguiente:
<img id = "pic" onClick = "this.src = 'a.jpg'" src = "aa.jpg" style = "cursor: pointer"/>
En IE, este código se puede usar para actualizar imágenes, pero no bajo Firefox. Es principalmente un problema de almacenamiento en caché.
[Procesamiento de compatibilidad] Agregar un número aleatorio después de que la dirección lo resolverá:
La copia del código es la siguiente:
<img id = "pic" onClick = "javascript: this.src = this.src+'?'+math.random ()" src = "a.jpg" style = "cursor: pointer"/>
Resumir
Hay muchas diferencias en JavaScript entre IE y Firefox. Para ser compatible, creo que es necesario organizar algunas comunes en una biblioteca JS, como operaciones DOM, procesamiento de eventos, solicitudes XMLHTTPRequest, etc., o también puede optar por usar algunas bibliotecas existentes (como jQuery, YUI, extjs, etc.). Sin embargo, creo que todavía es necesario comprender estas diferencias, lo cual es muy útil para nosotros participar en el código de compatibilidad y usabilidad.
Siempre hay más soluciones que problemas. No importa cómo el navegador sea compatible, ¡el desarrollo frontal siempre se puede resolver!