Hay ocasiones que estamos creando una página web, pero resulta que algunos de los estilos no funcionan con ciertos navegadores o con ciertas versiones, como suele suceder casi siempre con ie 6 por dar un ejemplo.
Para evitar ese dolor de cabeza lo que podemos hacer es crear un estilo especial para esos casos o de plano poner un anuncio de que por favor actualice el navegador a un version más reciente.
Pero como saber con que navegador o con que version del navegador esta entrando nuestro usuario?
La respuesta es muy sencilla vamos a usar una clase de JS que se llama Browser.
Lo que tenemos que hacer es muy sencillo vamos a descargar la clase del siguiente link. Browser.js
para descargar el archivo en 4shared necesitan loguearse pero es muy sencillo por que ya te puedes loguear por medio de tu cuenta de facebook,twitter o gmail.
Una vez descargado lo guardamos en la carpeta de nuestro proyecto y desde nuestro index o página principal html lo vamos a mandar llamar.
<script src="public/js/Browser.js"></script>
Ahora dentro de la sección body vamos a poner un div donde se va a imprimir la información sobre el navegador y su version. Ahora yo estoy colocando un div pero puede ser cualquier elemento en una celda de una tabla, un campo de texto etc, lo que va a importar es ponerle un id.
<div id="ie" > </div>
Es muy importante que cualquiera que sea el elemento que vamos a agregar le pongamos un id por que con ese es con el que lo vamos a mandar llamar.
Debajo del código html vamos a escribir el script donde vamos a mandar llamar la clase del Browser.
Nota: Es importante que lo pongamos debajo de todo el codigo html para que se hayan alcanzado a cargar todos los componentes antes de poder mandarlos llamar, de lo contrario no se mostraria ningun resultado.
<script type="text/javascript">
var brw = new Browser();
var name= brw.name;
var version= brw.version;
var msj='<div style="background-color:#ccc">
su navegador es ' + name + ' y la version es ' + version + '</div>
';
document.getElementById('ie').innerHTML=msj;
</script>
Les explicare el código: estamos declarando un variable a la que le puse el nombre de brw que será un objeto de la clase Browser.
Ahora si eres de los que no solo hacen copy paste si no que entras a ver la clase Browser te vas a dar cuenta de lo que te ofrece, ya que no solo puedes pedir el nombre y la version del navegador si no que tambien te ofrece la plataforma desde donde están accediendo, si es un mobil, y el ancho y alto de la pantalla.
En este caso solo mostraremos el nombre del navegador y la version. Por lo que se declaro una variable name que es igual al atributo name del objeto brw(clase Browser) y la variable version que va a ser igual al atributo version de brw.
Tambien declaramos una variable llamada msj, que será igual a un div en el que estamos colocando el mensaje su navegador es igual a name y la version es version (me he de imaginar que sabes un poquito de js si no es así el signo + se utiliza para unir las cadenas en este caso lo que esta entre comillas simples ' ' es texto y para unir texto con las variables le anexamos el signo + ).
Por ultimo mandamos llamar al div que agregamos anteriormente desde html al que llamamos ie y le agregamos el contenido de la variable mjs.
Ahora corremos el proyecto y mostrara algo similar a la imagen
+10.59.14.png)
El código completo:
<html>
<head>
<title>Donde me ves?</title>
<script src="public/js/Browser.js"></script>
</head>
<body>
<div id="ie" > </div>
</body>
</html>
<script type="text/javascript">
var brw = new Browser();
var name= brw.name;
var version= brw.version;
var msj='<div style="background-color:#ccc">
su navegador es ' + name + ' y la version es ' + version + '</div>';
document.getElementById('ie').innerHTML=msj;
</script>
Espero que este trocito de código te sirva tanto como a mí hay otras clases o funciones que sirven para el mismo fin no te cuesta nada probarlas y trabajar con la que mas se adapte a tus necesidades.
Si el link de descarga no funciona dejame un mensaje y lo vuelvo a subir.
"Programar no tiene que ser tan difícil como parece...."
No hay comentarios:
Publicar un comentario