martes, 20 de noviembre de 2007

JavaScript: Compatibilidad de Firefox con IExplorer

Firefox tiende a cumplir con alegría la especificación de JavaScript actual (la 1.8 y en breve la 2.0, también llamada ECMAScript pues ECMA es la entidad encargada de estandarizar JavaScript), mientras que IE, como todo lo de Microsoft, se escora hacia lo propietario, utilizando formas de acceso a propiedades no estandarizadas o, incluso, inventándose nuevas. De hecho, la versión de JavaScript de Microsoft se llama JScript, siendo diferentes el conjunto de objetos y propiedades accesibles desde JavaScript y desde JScript (distintos árboles DOM).

Si se programa únicamente pensando en IE (JScript) queda en el aire qué pasaría con navegadores que, siendo compatibles con JavaScript, no lo sean con JScript: Opera, Safari, Netscape, Konkeror,... y un largo etcétera de los mackeros y linuxeros.

Sin embargo, si se lleva todo hacia JavaScript perdemos al navegador potencialmente más frecuente, el IE.

Solución: de compromiso, como siempre.

Se coge el Firefox y se le instala un parseador o intérprete de JavaScript con consola de errores (recomiendo la extensión Firebug, habilitando la detección de todos los errores posibles, incluso warnings). Ejecutamos la web en cuestión y vamos comprobando los fallos.

Por cada uno se ve la llamada equivalente estándar que debería funcionar y se ponen las dos opciones, con un if-then-else.

EJEMPLO (no funcionaría en Firefox):

var obj = null;

obj = document.all("nombreelemento");


document.all NO funciona en Firefox, pero sí en IE. Es común que la gente copie y pegue este código desde cualquier ejemplo de Internet. (En realidad, las últimas versiones de Firefox sí que son compatibles con la llamada document.all(“nombrelemento”), pero al interrogar al browser por la existencia del método document.all devuelve “false”, precisamente por compatibilidad con los estándares de JavaScript.)

CÓMO RESOLVERLO:

var obj = null;

if (document.all){ /* Requiere que los IDs sean únicos en la página y que no coincidan con el atributo NAME de otros elementos. DOM de JScript, IE.*/

obj = document.all["nombreelemento"];
} else if (document.getElementById){

/* Para navegadores que soporten el DOM W3C. Firefox. */
obj = document.getElementById("nombreelemento");
}


MÁS RÁPIDO AÚN (usando la forma abreviada del if-else):

var obj = document.all ? document.all("nombreelemento") : document.getElementById("nombreelemento");


OTRA POSIBILIDAD: que haya propiedades sin correspondencia, por ejemplo:
La tecla pulsada en IE se recoge en event.keyCode y en Firefox (y demás W3C compatibles) en event.which.

if (((document.all) ? event.keyCode : event.which)==13)

IE leerá el event.keyCode y Firefox event.which.


Alfonso Diego de Gea García.
Ingeniero Informático.

2 comentarios:

Cris dijo...

Hola Diego,

Estoy probando la opción que das sobre el event pero me sigue sin funcionar en firefox, ¿podrías echarme una mano?

Muchas gracias!

Cris dijo...

Hola Diego,

Te escribí hace un par de semanas sobre lo de la compatabilidad de IE y Firefox, sigue sin funcionarme en firefox cuando pongo which, ¿por favor, podrías ayudarme?