> Manuales > Taller de Javascript

Vemos cómo incluir de una manera sencila una librería de scripts distinta para cada navegador.

Uno de los mayores problemas con los que se encuentra un programador a la hora de crear páginas con DHTML es los diferentes modelos de objetos que tienen cada uno de los navegadores, y cuyas diferencias no solo se dan con los navegadores de las distintas compañías, sino que además entre la misma compañía hay diferencias en la modelización de los objetos dependiendo de las versiones. Por ejemplo el modelo de objetos de Netscape 6 es distinto del modelo de ojetos de Netscape 4.

Todo esto nos crea el problema a la hora de escribir scripts de tener que duplicar el codigo de cada una de nuestras funciones dependiendo del navegador que se utiliza. Debido a la gran variedad de navegadores y versiones disponibles, esto hace que nuestras funciones acaben siendo mucho más grandes e ilegibles de lo esperado.

Una solución a este problema es la creación de diferentes ficheros que contienen los scripts para cada uno de los navegadores que existen, enlazando en el momento de la carga de la página con el fichero de scripts del navegador y versión que estamos utilizando. De esta forma, los scripts son mucho más simples ya que un script se creará enfocado a una sola version, y además en el caso de que salga al mercado un nuevo navegador con un modelo de objetos distinto, no tendremos que cambiar todos nuestros scripts, sino que nos bastará con modificar el script que detecta el navegador, y a continueación escribir un nuevo fichero que contiene los mismos scripts que los anteriores pero con el nuevo modelo de objetos.

El siguiente codigo pretende ser un ejemplo reducido de lo anteriormente expuesto.

Nuestro objetico va a ser diferenciar entre Netscape e Internet Explorer, de forma que al hacer click sobre un único botón, apararezca un mensaje de alerta distinto dependiendo del nagegador que utilicemos.

El primer paso es la creación de los distintos ficheros que van a contener los scripts especificos apra cada uno de los navegadores. En nuestro caso van a ser dos ficheros, uno que llamaremos Internet.js que contendra los scripts para Internet Explorer, y otro llamado Netscape.js que contendra los scripts para Netscape. El contenido de Internet.js será el siguiente:

function sacaAlerta(){
   alert("Estoy utilizando IE")
}


El contenido de Nescape.js será el siguiente:

function sacaAlerta(){
   alert("Estoy utilizando NS")
}


Por otra parte, en la cabecera de cada una de las páginas, deberemos incluir un script que enlace con cada uno de los navegadores, dependiendo del que utiliza el usuario.

<script language="javascript">

ns=(document.layers)? true:false
ie=(document.all)? true:false

ponNs="<script language='javascript1.2' src='netscape.js'> <\/script>"
ponIe="<script language='javascript1.2' src='internet.js'> <\/script>"

if (ns) {document.write(ponNs)}
if (ie) {document.write(ponIe)}

</script>


* Fijaros en la contrabarra "\" colocada antes de la barra "/"
en </script> en los document.write().

Por ultimo inclimos en el cuerpo de la página un boton que llama a la funcion que esta definida dentro de los ficheros de scripts:

<input type="button" value="Haz Click" onclick="sacaAlerta()">

De forma que la página queda con el siguiente aspecto:


<html>
<head>
   <title>Untitled</title>
<script language="javascript">

ns=(document.layers)? true:false
ie=(document.all)? true:false

ponNs="<script language='javascript1.2' src='netscape.js'> <\/script>"

ponIe="<script language='javascript1.2' src='internet.js'> <\/script>"

if (ns) {document.write(ponNs)}

if (ie) {document.write(ponIe)}

</script>

</head>

<body>

<form>
<input type="button" value="Haz Click" onclick="sacaAlerta()">
</form>

</body>
</html>

Carlos Luis Cuenca

Manual