Cargando

Ir a contenido


 


Detectar el navegador con JavaScript

En este tutorial te mostramos como detectar el navegador del visitante con JavaScript.


Escrito por el jul 22 2015 08:55 javascript


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.

¿Te ha gustado y ayudado este Tutorial?
Puedes premiar al autor pulsando este botón para darle un punto positivo
  • -
  • 0
10
VOTA
5
100%
4
0%
3
0%
2
0%
1
0%

  Información

  •   Publicado jul 22 2015 08:55
  •   Actualizado ago 22 2016 15:43
  •   Visitas 11.6K
  •   Nivel
    Intermedio



Tutoriales Relacionados


3 Comentarios


Fiore Nella
jul 22 2015 10:44

útil donde los haya


FranjoReyes
oct 22 2016 23:24

Gracias por esta ayuda. Tengo una pregunta: ¿Y si quiero lo mismo, pero en vez de dar una alerta, necesito cargar una hoja de estilo específica?

 

Saludos


Junior Yauricasa
nov 21 2016 21:20

Excelente mi estimado, me ayudado con respecto al problema de los input tipo date que no pueden verse en navegadores como firefox e Internet explorer...

Me encuentro trabajando con asp.net para lo cual los id de cada elemento los transforma con un prefijo adicional, lo cual no me había percatados los primeros días y tuve inconvenientes con ello. puesto que el js se ejecutaba pero no era el mismo id al cual darle el date, pero ya esta tomando forma...

 

 
<!--Librerias para datepicker-->
<link href="http://ajax.googleap...e/jquery-ui.css" rel="stylesheet" type="text/css"/>
 
 
<script>
var es_firefox = navigator.userAgent.toLowerCase().indexOf('firefox') > -1;
var es_ie = navigator.userAgent.indexOf("MSIE") > -1;
 
if (es_firefox || es_iem) {
$(document).ready(function () {
$("#ContentPlaceHolder1_datecont").datepicker();
});
}
</script>
 
 
 
<input type="date" id="ContentPlaceHolder1_datecont" value="" max="">
No esperes más y entra en Solvetic
Deja tus comentarios y aprovecha las ventajas de la cuenta de usuario ¡Únete!
Demuestra que eres experto!
  ESCRIBIR TUTORIAL
Suscribirse