Cómo detectar el navegador usando la propiedad userAgent de JavaScript


En alguna ocasión cuando estamos desarrollando una aplicación web podría darse el caso que necesitemos conocer la identidad del navegador que está utilizando el usuario, esto para validar alguna funcionalidad o para agregar alguna característica adicional dependiendo del navegador.

Qué es userAgent

userAgent es una propiedad de la interfaz navigator, la cual contiene métodos y propiedades relacionadas con la identidad del navegador.

Detectando el navegador

Lo primero será crear un HTML básico para visualizar el resultado del JavaScript, tendrá que ser algo como esto:

    <!DOCTYPE html>
    <html lang="es">
    <head>
    <meta charset="UTF-8">
    <title>IC</title>
    </head>
    <body>
    <div id="contenedor">
        <header>
            <div id="titulo">
                <h1>DETECTAR NAVEGADOR CON JAVASCRIPT</h1>
            </div>
        </header> 
        <section id="main">
            <div id="navegador"></div>
        </section>
    </div>
    </body>
    </html>        
      

El código JavaScript

Una vez que ya está el html agregamos el javascript justo antes del cierre de la etiqueta body.

  <script>
    function navegador(){
        var agente = window.navigator.userAgent;
        var navegadores = ["Chrome", "Firefox", "Safari", "Opera", "Trident", "MSIE", "Edge"];
        for(var i in navegadores){
            if(agente.indexOf( navegadores[i]) != -1 ){
                return navegadores[i];
            }
        }
    }
    var browser = document.getElementById("navegador");
    window.onload = function(){
    browser.innerHTML = "El navegador es: "+ navegador();
    }
   // alert(window.navigator.userAgent);
   </script>
    

Demostración

Su navegador es: . Mostrar en un alert:


Anuncios / Ads
Anuncios / Ads

Sobre programación web

• Validación de formularios usando características de HTML5
• Método para insertar registros en MySQL usando PHP
• Obtener datos desde MySQL y mostrar el resultado en una tabla
• Los colores y sus códigos RGB
• Cómo evitar los comentarios spam
• Creando un login simple con jquery, php y mysql
• Conversor de Medidas Online
• Visualizar datos en una tabla parte II: Aplicando estilo css
• Un ejemplo de ABM usando Ajax - PHP - MySQL
• Usando jquery para modificar elementos del HTML
• Usar PDO para conectarse a MYSQL
• Cómo detectar el navegador usando JavaScript

Fotografía

• Michelles Jaque
• Beatriz Cabrera Zapata

Poesías

• Mini Poesías - Constanza Gonzales
• Sobre las decisiones - Constanza Gonzales

Últimas Publicaciones

• Cómo desarmar un notebook HP Compaq Presario C700
• Enviar correos usando un formulario desde sitio web o localhost con PHPMailer
• Cómo crear un cuadro de búsqueda al estilo Google
• Sistema de LogIn con verificación de email y recuperación de contraseña usando PHP
• Proyecto Intranet: Ordenes de servicio y ventas

Anuncios / Ads

Newsletter



Gracias. Te mantendremos informado

Website Template por IdeasChile © Optimizado para Chrome - Firefox - Opera