Herramientas para desarrolladores : Cursos, manuales y guías de referencia : Cursos : JavaScript avanzado :

Comprobación de capacidades soportadas por el navegador

1. Introducción
2. El agente de usuario del navegador
3. Comprobación de la versión de JavaScript soportada
4. Detección de objetos

1. Introducción

Desgraciadamente, cada fabricante implementa el soporte de JavaScript de forma diferente, y en consecuencia no todos los navegadores soportan toda la especificación. Algunos navegadores la soportan, pero de forma incompleta o defectuosa, mientras que otros han creado su propio estándar (como hizo Netscape con el objeto layer). Por ello, se hace necesario un mecanismo que nos permita averiguar si el navegador que está cargando la página soporta el objeto que vamos a usar (sobre todo, cuando hay motivos suficientes para pensar que existe cierta incompatibilidad con dicho objeto).

A continuacion exponemos los mecanismos más habituales para sortear este inconveniente.

2. El agente de usuario del navegador

La detección podría basarse en el contenido del objeto window.navigator.userAgent (agente de usuario), que almacena en una cadena de texto información sobre el fabricante, la versión y el sistema operativo. Puede parecer una buena idea implementar una comprobación del agente de usuario, para bifurcar el código en uno u otro sentido en función del resultado. Sin embargo, no es en absoluto trivial obtener información útil para un script a partir de estos datos. La codificación de la cadena que forma el agente de usuario no está en absoluto estandarizada, y responde más a motivos históricos que a un razonamiento lógico.

A continuación damos algunas pautas a seguir si se quiere tener éxito. Ninguna de ellas es una norma, así que deben tomarse con precaución:

• Por razones históricas, el agente de usuario comienza siempre con la palabra Mozilla, aunque el navegador no tenga nada que ver con esta organización.
• Seguidamente suele aparecer una barra, y un número de versión. Este valor sólo es válido si el navegador es Netscape. En caso contrario, la versión hay que buscarla a continuación del nombre real del navegador.
• Los navegadores que no son auténticos Mozilla, suelen añadir la palabra compatible.
• A continuación, cada fabricante codificará el nombre de su navegador (entre otras informaciones), con una palabra clave (por ejemplo, MSIE para el Microsoft Internet Explorer, Opera para los navegadores de Opera, etc.).
• El sistema operativo tiene su palabra clave en la cadena (en uno u otro lugar). Para Windows, Netscape usa Win, mientras que Microsoft utiliza Windows. Con esta salvedad, el resto de claves es fija: Mac para Macintosh y Linux para sistemas operativos Linux.

Una buena fuente de información sobre los diferentes agentes de usuario que ofrece cada navegador se puede encontrar en la página Browser ID (User-Agent) Strings.

El siguiente botón permite visualizar la cadena del agente de usuario de su navegador:

El script Detección del navegador práctica es un buen ejemplo de cómo extraer de las variables anteriores la información sobre el sistema operativo, el fabricante, el modelo y la versión del navegador que ejecuta nuestro código.

Sin embargo, aún valiéndonos de la ayuda de un buen script, es imposible abarcar la increible variedad de agentes de usuario existentes, no sólo por el elevado número de fabricantes de software que han desarrollado su propio navegador, sino también porque cada plataforma o sistema operativo da lugar a diferentes identificadores para los mismos browsers, y cada nueva versión suele implicar también un cambio en el valor del agente de usuario. El código anterior no cubre, por tanto, todas las posibilidades, y fallará en la detección cuando un navegador no esté en su lista. Además, mantener este tipo de código es muy costoso, ya que es necesario revisarlo cada vez que aparecen nuevas versiones.

Por otra parte, detectar el navegador no es suficinete. Es necesario conocer también las capacidades de cada navegador. En los viejos tiempos, cuando Netscape y Microsoft representaban el 99% de los browsers utilizados, y sus características y limitaciones eran conocidas, resultaba sencillo saber qué hacer en cada caso. Sin embargo, hoy en día navegadores como Opera, Mozilla y Firefox tienen gran difusión, y sin embargo no es tan evidente qué capacidades tiene cada uno de ellos.

Por los motivos expuestos anteriormente, desaconsejamos cualquier intento de comprobar si cierto objeto está soportado en base a la detección del navegador.

3. Detección de la versión de JavaScript soportada

Una idea sugerente es utilizar la versión de JavaScript que define el ojeto que queremos usar para evitar que los navegadores que no soporten esta versión de JavaScript ejecuten el código. Por ejemplo, para que nuestro código sólo se ejecute en los navegadores que soportan la versión 1.2 de JavaScript (o superior), se utilizaría la siguiente codificación en la etiqueta script.

<script language="javascript1.2" type="text/javascript">

Es evidente que esta técnica para detectar las capacidades del navegador es totalmente inadecuada, ya que la versión de JavaScript que auncia un navegador no guarda una relación real con las capacidades JavaScript que soporta. Sin ir más lejos, Netscape 4 y el IE 4 anuncian soporte de la versión 1.2 de JavaScript, pero su modelo de objetos es totalmente diferente.

4. Detección de objetos

La detección de objetos se basa en comprobar si el navegador implementa cierto objeto o método antes de utilizarlo. Para aplicarlo basta con codificar sentencias if ... else utilizando el nombre del objeto como condición.

Por ejemplo, para comprobar si el objeto document.all, exclusivo de ciertas versiones del Internet Explorer, está soportado, escribiríamos:

if ( document.all ) { //codigo que usa el objeto document.all } else { //codigo que no lo soporta }

Para comprobar un método, se codifica la comprobación de igual forma, pero ojo, sin incluir los paréntesis de llamada de la función. Por ejemplo:

if ( window.focus ) { //codigo que usa el metodo window.focus() } else { //codigo que no lo soporta }