Cuando estamos desarrollando alguna aplicación web puede darse el caso que tengamos que detectar el navegador que esté utilizando el usuario para validar alguna funcionalidad que hayamos implementado y que no funcione con este o simplemente porque queremos habilitar características adicionales dependiendo de un navegador u otro.
Lo mejor para estos casos es utilizar JavaScript y ahorrarnos dolores de cabeza para detectar el navegador, veamos cómo lo hacemos.
Detectando el navegador
Primero creemos un HTML sencillo para poder incluir nuestro JavaScript y verificar nuestras validaciones, este contendrá el siguiente contenido:
<!DOCTYPE html> <html lang="en"> <head> <script type="text/javascript"> </script> <meta charset="UTF-8"> <title>Detectando el navagedor del usuario</title> </head> <body> </body> </html>Ya con nuestro código HTML podremos empezar a crear nuestro código JavaScript el cual irá dentro de las etiquetas script. Primero detectemos uno de los navegadores más utilizados, Google Chrome, para ello utilizaremos el objeto navigator el cual contiene todo lo que necesitamos:
var es_chrome = navigator.userAgent.toLowerCase().indexOf('chrome') > -1;
if(es_chrome){
alert("El navegador que se está utilizando es Chrome");
}Al ejecutar nuestro ejemplo en cualquier navegador que no sea Google Chrome no obtendremos el mensaje, sin embargo al ejecutarlo en el navegador mencionado, obtendremos el siguiente mensaje:
Ya sabemos cómo detectar Google Chrome, veamos la manera de hacerlo para Firefox:
var es_firefox = navigator.userAgent.toLowerCase().indexOf('firefox') > -1;
if(es_firefox){
alert("El navegador que se está utilizando es Firefox");
}Como vemos el código es bastante similar, ya que podemos utilizar de igual forma el objeto navigator y si nos damos cuenta con el -1 detectamos todas las versiones del mismo, veamos la respuesta del mismo al ejecutarlo en Firefox:
Podemos también detectar el navegador Opera, no es muy utilizado entre los usuarios pero vale la pena saber cómo hacerlo por igual:
var es_opera = navigator.userAgent.toLowerCase().indexOf('opera');
if(es_opera){
alert("El navegador que se está utilizando es Opera");
}Por último, es importante detectar Internet Explorer ya que es uno de los navegadores que da más problemas en el desarrollo web, a nivel de estilos, eventos y efectos, veamos cómo detectarlo:
var es_ie = navigator.userAgent.indexOf("MSIE") > -1 ;
if(es_ie){
alert("El navegador que se está utilizando es Internet Explorer");
}Lo ejecutamos en el navegador y obtendremos la siguiente respuesta comprobando así nuestra funcionalidad:
Finalizamos así este tutorial, sumando porciones de código que nos ayudarán a detectar el navegador del usuario, algo muy útil para aquellas ocasiones donde necesitamos validar su entorno sea para resolver problemas del motor o habilitar características especiales para el mismo.
útil donde los haya