The Dynamic Duo - Cross-Browser JavaScript

Cross-Browser JavaScript

Puedes utilizar JavaScript para accesar y cambiar propiedades en tu elemento CSS-P. Como sean algunos de las sintaxis se difieren entre Netscape 4.0 y Internet Explorer 4.0. Pero conociendo en donde están las diferencias, te mostrare una forma fácil de crear scripts cross-browser - scripts que podrán trabajar en Netscape 4 y IE4.

Chequeando el Browser :

Ahora estoy utilizando ns4 y ie4 para chequear el browser en lugar de n y ie

Primera cosa primero: tenemos que saber de como chequear que tipo de browser alguien esta utilizando. Este pequeño pedacito de código será el standard chequeador de browser en casi todos los ejemplos dentro de esta Guía:

ns4 = (document.layers)? true:false
ie4 = (document.all)? true:false

El objeto document.layers es especificado para Netscape 4.0 por mientras que el objeto document.all es especificado para IE 4.0. Entonces con chequear si el objeto existe podremos crear un variable boolean ns4 (para Netscape 4.0) y ie4 (para Internet Explorer 4.0) y asignarle a estos, falso o verdadero dependiendo de cual browser esta siendo utilizado. Ahora cuando quieres chequear cual es el Browser que alguien esta utilizando nada mas tienes que utilizar if (ns4) o if (ie4):

function check() {
	if (ns4) {
		// hace algo en Netscape Navigator 4.0
	}
	if (ie4) {
		// hace algo en Internet Explorer 4.0
	}
}

Utilizando JavaScript y CSS-P:

Digamos que tenemos un tag DIV que aparece como asi:

<DIV ID="blockDiv" STYLE="position:absolute; left:50; top:100; width:30;">
<IMG SRC="block.gif" WIDTH=30 HEIGHT=30 BORDER=0>
</DIV>

Recuerda que esto es un ejemplo, puedes nombrar de nuevo blockDiv a lo que tu desees y continuará trabajando exactamente igual.

Para Netscape la forma general de accesar la propiedades de CSS-P es así:

document.blockDiv.propertyName

document.layers["blockDiv"].propertyName

Y para Internet Explorer es:

blockDiv.style.propertyName

document.all["blockDiv"].style.propertyName

Donde propertyName podra ser cualquiera de izquierda "left", arriba "top", visibilidad "visibility", zIndex, ancho "width", o cualquier otra propiedad de CSS-P.

El método Cross-Browser Method Varibale Indicador ("Pointer Variables"):

He visto que la mejor manera de hacer scripts cross-browser es de tener un variable, eso dependiendo si estas en Netscape o en IE, indicando directamente a cualquiera ya sea document.blockDiv o blockDiv.style. Observa abajo. Yo le llamo a estos variables, variables indicadores.

if (ns4) block = document.blockDiv
if (ie4) block = blockDiv.style

Puedes ver, después de que haces esto, puedes accesar ahora las propiedades utilizando una vía más corta. Por ejemplo si tu deseas chequera el coordinador izquierda de nuestro tag DIV llamado también "blockDiv", simplemente será:

block.left

No importará cual browser sé esta utilizando porque Netscape, block indica hacia el document.blockDiv, y en IE, block indica hacia blockDiv.style.

Nota: A lo largo de esta Guía estaré nombrando mis tags DIV con un "Div" a lo último de estas (squareDiv, blockDiv etc.). Esto es porque cuando tu inicias una capa utilizando el método de indicador variable, tendrás que escoger un nombre para el variable que sea totalmente único - no puede ser el mismo nombre que una de tus tags DIV. En mi código lo hago standard que todas las capas que van a hacer iniciadas con un indicador variable automáticamente tiene un "Div" y hago el nombre del indicador variable sin el "Div" - porque como podrás ver terminaras utilizando el indicador variable mucho más veces que el nombre de la misma capa.

Un ejemplo completo :

Este ejemplo mostrara un alerta en las propiedades izquierda, derecha y visibilidad del elemento CSS-P.

El script:

<SCRIPT LANGUAGE="JavaScript">
<!--
ns4 = (document.layers)? true:false
ie4 = (document.all)? true:false

function init() {
	if (ns4) block = document.blockDiv
	if (ie4) block = blockDiv.style
}

//-->
</SCRIPT>

El HTML:

<BODY onLoad="init()">

<A HREF="javascript:alert(block.left)">left</A> -
<A HREF="javascript:alert(block.top)">top</A> -
<A HREF="javascript:alert(block.visibility)">visibility</A>

<DIV ID="blockDiv" STYLE="position:absolute; left:50; top:100; width:30; visibility:visible;">
<IMG SRC="block.gif" WIDTH=30 HEIGHT=30 BORDER=0>
</DIV>

</BODY>

javascript1.html [fuente] - para ver este ejemplo

Importante:Yo llamo a la función init() en el cuerpo BODY onLoad="" la cual ejecutara después que él es resto de la página este completamente cargada. Esto es porque cuando se define tu indicador variable, el tag DIV debe de ya existir. Si tratas de definir el indicador variable antes de que la página haya terminado de cargar recibirás un error JavaScript como bloc no es definido "block is not defined".

Las Diferencias

Si tu abres los dos Netscape y IE y intentas este último ejemplo en cada uno, notaras que no recibes los mismos valores.

Property	N4 Value	IE4 Value
izquierda	50	50px
arriba	100	50px
visibilidad	mostrar	visible

Estas diferencias pueden causar algunos problemas pero en unas lecciones siguientes te mostrare como dominar los.