¿Cómo detectar el navegador Safari, Chrome, IE, Firefox y Opera?


823

Tengo 5 complementos / extensiones para FF, Chrome, IE, Opera y Safari.

¿Cómo puedo reconocer el navegador del usuario y redirigir (una vez que se ha hecho clic en un botón de instalación) para descargar el complemento correspondiente?


2
intente detectjs, se puede usar para todos los navegadores
amigo

1
¿Posible duplicado de la detección
Matthijs Wessels

2
detect.js ya no se mantiene (según github.com/darcyclarke/Detect.js ), recomiendan github.com/lancedikson/bowser
YakovL

Utilicé el complemento UAParser, está escrito en Vanilla JavaScript. Fuente: ¿Cómo detectar el navegador, el motor, el sistema operativo, la CPU y el dispositivo usando JavaScript?
Luzan Baral

Respuestas:


1689

Buscar en Google para la detección confiable del navegador a menudo da como resultado la comprobación de la cadena del agente de usuario. Este método no es confiable, porque es trivial suplantar este valor.
He escrito un método para detectar navegadores escribiendo pato .

Solo use el método de detección del navegador si es realmente necesario, como mostrar instrucciones específicas del navegador para instalar una extensión. Utilice la detección de funciones cuando sea posible.

Demostración: https://jsfiddle.net/6spj1059/

// Opera 8.0+
var isOpera = (!!window.opr && !!opr.addons) || !!window.opera || navigator.userAgent.indexOf(' OPR/') >= 0;

// Firefox 1.0+
var isFirefox = typeof InstallTrigger !== 'undefined';

// Safari 3.0+ "[object HTMLElementConstructor]" 
var isSafari = /constructor/i.test(window.HTMLElement) || (function (p) { return p.toString() === "[object SafariRemoteNotification]"; })(!window['safari'] || (typeof safari !== 'undefined' && safari.pushNotification));

// Internet Explorer 6-11
var isIE = /*@cc_on!@*/false || !!document.documentMode;

// Edge 20+
var isEdge = !isIE && !!window.StyleMedia;

// Chrome 1 - 79
var isChrome = !!window.chrome && (!!window.chrome.webstore || !!window.chrome.runtime);

// Edge (based on chromium) detection
var isEdgeChromium = isChrome && (navigator.userAgent.indexOf("Edg") != -1);

// Blink engine detection
var isBlink = (isChrome || isOpera) && !!window.CSS;


var output = 'Detecting browsers by ducktyping:<hr>';
output += 'isFirefox: ' + isFirefox + '<br>';
output += 'isChrome: ' + isChrome + '<br>';
output += 'isSafari: ' + isSafari + '<br>';
output += 'isOpera: ' + isOpera + '<br>';
output += 'isIE: ' + isIE + '<br>';
output += 'isEdge: ' + isEdge + '<br>';
output += 'isEdgeChromium: ' + isEdgeChromium + '<br>';
output += 'isBlink: ' + isBlink + '<br>';
document.body.innerHTML = output;

Análisis de confiabilidad

El método anterior dependía de las propiedades del motor de renderizado ( -moz-box-sizingy -webkit-transform) para detectar el navegador. Estos prefijos finalmente se eliminarán, por lo que para hacer que la detección sea aún más sólida, cambié a las características específicas del navegador:

  • Internet Explorer: compilación condicional de JScript (hasta IE9) y document.documentMode.
  • Edge: en los navegadores Trident y Edge, la implementación de Microsoft expone al StyleMediaconstructor. Excluir a Trident nos deja con Edge.
  • Edge (basado en cromo): el agente de usuario incluye el valor "Edg / [versión]" al final (por ejemplo, "Mozilla / 5.0 (Windows NT 10.0; Win64; x64) AppleWebKit / 537.36 (KHTML, como Gecko) Chrome / 80.0.3987.16 Safari / 537.36 Edg / 80.0.361.9 ").
  • Firefox: API de Firefox para instalar complementos: InstallTrigger
  • Chrome: el chromeobjeto global , que contiene varias propiedades, incluido un chrome.webstoreobjeto documentado .
  • La actualización 3 chrome.webstoreestá en desuso y no está definida en versiones recientes
  • Safari: un patrón de nomenclatura único en su denominación de constructores. Este es el método menos duradero de todas las propiedades enumeradas y ¿adivina qué? En Safari 9.1.3 se solucionó. Por lo tanto, estamos comparando SafariRemoteNotification, que se introdujo después de la versión 7.1, para cubrir todos los Safaris desde 3.0 en adelante.
  • Opera: window.operaexiste desde hace años, pero se eliminará cuando Opera reemplace su motor con Blink + V8 (utilizado por Chromium).
  • Actualización 1: Opera 15 ha sido lanzado , su cadena UA se parece a Chrome, pero con la adición de "OPR". En esta versión, el chromeobjeto está definido (pero chrome.webstoreno lo está). Como Opera se esfuerza por clonar Chrome, utilizo la detección de agentes de usuario para este propósito.
  • Actualización 2: !!window.opr && opr.addonsse puede usar para detectar Opera 20+ (perenne).
  • Blink: CSS.supports() se introdujo en Blink una vez que Google encendió Chrome 28. Es, por supuesto, el mismo Blink utilizado en Opera.

Probado con éxito en:

  • Firefox 0.8 - 61
  • Chrome 1.0 - 71
  • Opera 8.0 - 34
  • Safari 3.0 - 10
  • IE 6-11
  • Borde - 20-42
  • Edge Dev - 80.0.361.9

Actualizado en noviembre de 2016 para incluir la detección de navegadores Safari desde 9.1.3 en adelante

Actualizado en agosto de 2018 para actualizar las últimas pruebas exitosas en Chrome, Firefox IE y Edge.

Actualizado en enero de 2019 para corregir la detección de Chrome (debido a la obsolescencia de window.chrome.webstore) e incluir las últimas pruebas exitosas en Chrome.

Actualizado en diciembre de 2019 para agregar Edge según la detección de cromo (según el comentario de @Nimesh).


55
FYI Esto no funciona con las extensiones de Chrome, ya window.chrome.webstoreque no está definido allí. No lo he comprobado con las extensiones de Firefox. is.jsmencionado en otra parte funciona en las extensiones de Chrome y Firefox.
nevf

6060
isSafarino funciona con Safari 10. Voy a argumentar que esta es una mala solución (no es que tenga una buena). No hay garantía de que muchas de las cosas que verificará no se eliminarán O no serán agregadas por otros navegadores. Todos los sitios que usaban este código para verificar Safari simplemente rompieron con las actualizaciones de macOS Sierra o Safari 10 :(
gman

10
Pero, ¿se ha probado esto en las versiones móviles de esos navegadores, así como también en las versiones de escritorio ? Y sinceramente, hay diferentes versiones móviles y diferentes versiones de escritorio por plataforma. Entonces, realmente, Firefox tiene 3 binarios para Windows, Linux, Mac OS y 2 binarios para Android e iOS.
DrZ214

3
La corriente isSafarino funciona bajo <iframe>Safari 10.1.2
Mikko Ohtamaa

23
window.chrome.webstore está en desuso a partir de Chrome ver. 71: blog.chromium.org/2018/06/…
st_bk

133

Puede intentar la siguiente forma de verificar la versión del navegador.

    <!DOCTYPE html>
    <html>
    <body>
    <p>What is the name(s) of your browser?</p>
    <button onclick="myFunction()">Try it</button>
    <p id="demo"></p>
    <script>

    function myFunction() { 
     if((navigator.userAgent.indexOf("Opera") || navigator.userAgent.indexOf('OPR')) != -1 ) 
    {
        alert('Opera');
    }
    else if(navigator.userAgent.indexOf("Chrome") != -1 )
    {
        alert('Chrome');
    }
    else if(navigator.userAgent.indexOf("Safari") != -1)
    {
        alert('Safari');
    }
    else if(navigator.userAgent.indexOf("Firefox") != -1 ) 
    {
         alert('Firefox');
    }
    else if((navigator.userAgent.indexOf("MSIE") != -1 ) || (!!document.documentMode == true )) //IF IE > 10
    {
      alert('IE'); 
    }  
    else 
    {
       alert('unknown');
    }
    }
    </script>

    </body>
    </html>

Y si necesita conocer solo la versión del navegador IE, puede seguir el siguiente código. Este código funciona bien para la versión IE6 a IE11

<!DOCTYPE html>
<html>
<body>

<p>Click on Try button to check IE Browser version.</p>

<button onclick="getInternetExplorerVersion()">Try it</button>

<p id="demo"></p>

<script>
function getInternetExplorerVersion() {
   var ua = window.navigator.userAgent;
        var msie = ua.indexOf("MSIE ");
        var rv = -1;

        if (msie > 0 || !!navigator.userAgent.match(/Trident.*rv\:11\./))      // If Internet Explorer, return version number
        {               

            if (isNaN(parseInt(ua.substring(msie + 5, ua.indexOf(".", msie))))) {
                //For IE 11 >
                if (navigator.appName == 'Netscape') {
                    var ua = navigator.userAgent;
                    var re = new RegExp("Trident/.*rv:([0-9]{1,}[\.0-9]{0,})");
                    if (re.exec(ua) != null) {
                        rv = parseFloat(RegExp.$1);
                        alert(rv);
                    }
                }
                else {
                    alert('otherbrowser');
                }
            }
            else {
                //For < IE11
                alert(parseInt(ua.substring(msie + 5, ua.indexOf(".", msie))));
            }
            return false;
        }}
</script>

</body>
</html>

3
¿Por qué uno escribiría tantas líneas de código? userAgent es ambiguo.
igaurav

55
¿Qué hay de Microsoft Edge?
user6031759

3
la respuesta anterior verifica el cromo antes de verificar el safari. porque safari no tendrá una chromepalabra clave en useragent. ejemplo de uso de safari -mozilla/5.0 (macintosh; intel mac os x 10_11_5) applewebkit/601.6.17 (khtml, like gecko) version/9.1.1 safari/601.6.17
Golak Sarangi

11
Stackoverflow utiliza este método
vityavv

3
Al probar esto en Opera (última versión), me devuelve 'Chrome'. Para solucionar esto, cambié la declaración de Opera if a:if(navigator.userAgent.indexOf("Opera") != -1 || navigator.userAgent.indexOf('OPR') != -1 )
Kyle Vassella

60

Sé que puede ser excesivo usar una lib para eso, pero solo para enriquecer el hilo, puedes verificar la forma en que is.js de hacer esto:

is.firefox();
is.ie(6);
is.not.safari();

99
Solo vale la pena señalar que, bajo el capó, está principalmente haciendo detección de User-Agent. Complementado con detección de proveedores / detección de algunas características en lugares.
TygerKrash

1
@TygerKrash seguro, tienes toda la razón. Eso es en realidad lo que quise decir con mi respuesta: abra el código fuente is.jsy verifique cómo lo hacen.
Rafael Eyng

44
jQuery solía incluir propiedades similares: $ .browser.msie ... Se eliminaron de la versión 1.9 api.jquery.com/jquery.browser
Riga

@RafaelEyng: Creo que el problema con la detección del agente de usuario es que este método no es confiable.
HoldOffHunger

Este es definitivamente el enfoque más sólido cuando se supone que la cadena UA no se ha modificado. También detecta correctamente el sistema operativo (android, win, mac, linux); tipo de dispositivo (escritorio, tableta, móvil). También puede probar la versión del navegador.
kashiraja

51

Aquí hay varias bibliotecas destacadas que manejan la detección del navegador a partir de diciembre de 2019.

Bowser por lancedikson - 4,065 ★ s - Última actualización 2 de octubre de 2019 - 4.8KB

var result = bowser.getParser(window.navigator.userAgent);
console.log(result);
document.write("You are using " + result.parsedResult.browser.name +
               " v" + result.parsedResult.browser.version + 
               " on " + result.parsedResult.os.name);
<script src="https://unpkg.com/bowser@2.7.0/es5.js"></script>

* admite Edge basado en cromo


Platform.js por bestiejs - 2,550 ★ s - Última actualización 14 de abril de 2019 - 5.9KB

console.log(platform);
document.write("You are using " + platform.name +
               " v" + platform.version + 
               " on " + platform.os);
<script src="https://cdnjs.cloudflare.com/ajax/libs/platform/1.3.5/platform.min.js"></script>

jQuery Browser por gabceb - 504 ★ s - Última actualización 23 de noviembre de 2015 - 1.3KB

console.log($.browser)
document.write("You are using " + $.browser.name +
               " v" + $.browser.versionNumber + 
               " on " + $.browser.platform);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-browser/0.1.0/jquery.browser.min.js"></script>

Detect.js (Archivado) por darcyclarke - 522 ★ s - Última actualización 26 de octubre de 2015 - 2.9KB

var result = detect.parse(navigator.userAgent);
console.log(result);
document.write("You are using " + result.browser.family +
               " v" + result.browser.version + 
               " on " + result.os.family);
<script src="https://cdnjs.cloudflare.com/ajax/libs/Detect.js/2.2.2/detect.min.js"></script>

Detección del navegador (Archivado) por QuirksMode - Última actualización 14 de noviembre de 2013 - 884B

console.log(BrowserDetect)
document.write("You are using " + BrowserDetect.browser +
               " v" + BrowserDetect.version + 
               " on " + BrowserDetect.OS);
<script src="https://kylemit.github.io/libraries/libraries/BrowserDetect.js"></script>


Menciones notables:

  • WhichBrowser - 1,355 ★ s - Última actualización 2 de octubre de 2018
  • Modernizr - 23,397 ★ s - Última actualización 12 de enero de 2019 - Para alimentar a un caballo alimentado, la detección de funciones debe generar cualquier pregunta de estilo canIuse . La detección del navegador es realmente solo para proporcionar imágenes personalizadas, descargar archivos o instrucciones para navegadores individuales.

Otras lecturas


1
Vale la pena unos pocos Kb de sobrecarga para no reinventar la rueda.
glifo

46

En caso de que alguien encuentre esto útil, he convertido la respuesta de Rob W en una función que devuelve la cadena del navegador en lugar de tener varias variables flotando. Dado que el navegador tampoco puede cambiar realmente sin volver a cargarlo, lo he guardado en caché del resultado para evitar que tenga que resolverlo la próxima vez que se llame a la función.

/**
 * Gets the browser name or returns an empty string if unknown. 
 * This function also caches the result to provide for any 
 * future calls this function has.
 *
 * @returns {string}
 */
var browser = function() {
    // Return cached result if avalible, else get result then cache it.
    if (browser.prototype._cachedResult)
        return browser.prototype._cachedResult;

    // Opera 8.0+
    var isOpera = (!!window.opr && !!opr.addons) || !!window.opera || navigator.userAgent.indexOf(' OPR/') >= 0;

    // Firefox 1.0+
    var isFirefox = typeof InstallTrigger !== 'undefined';

    // Safari 3.0+ "[object HTMLElementConstructor]" 
    var isSafari = /constructor/i.test(window.HTMLElement) || (function (p) { return p.toString() === "[object SafariRemoteNotification]"; })(!window['safari'] || safari.pushNotification);

    // Internet Explorer 6-11
    var isIE = /*@cc_on!@*/false || !!document.documentMode;

    // Edge 20+
    var isEdge = !isIE && !!window.StyleMedia;

    // Chrome 1+
    var isChrome = !!window.chrome && !!window.chrome.webstore;

    // Blink engine detection
    var isBlink = (isChrome || isOpera) && !!window.CSS;

    return browser.prototype._cachedResult =
        isOpera ? 'Opera' :
        isFirefox ? 'Firefox' :
        isSafari ? 'Safari' :
        isChrome ? 'Chrome' :
        isIE ? 'IE' :
        isEdge ? 'Edge' :
        isBlink ? 'Blink' :
        "Don't know";
};

console.log(browser());


2
en el navegador Edge, devuelve Chrome
Riz

2
@eFriend Actualicé la respuesta a las últimas pruebas del navegador.
pilau

44
Me gusta esto, pero hubiera preferido una alternativa a userAgent (), en lugar de "No sé".
HoldOffHunger

2
La propiedad window.chrome.webstorese eliminó en Chrome 71, por lo que este enfoque ya no funciona.
Bedla

puede sobrescribir la función con una función que simplemente devuelve el resultado cachedResult y omita la instrucción if. La primera vez todavía tiene que devolver el resultado. browser = function () {return cachedResult}; return cachedResult;
Timar Ivo Batis

22

Variante corta

var browser = (function() {
    var test = function(regexp) {
        return regexp.test(window.navigator.userAgent);
    }
    switch (true) {
        case test(/edg/i): return "edge";
        case test(/opr/i) && (!!window.opr || !!window.opera): return "opera";
        case test(/chrome/i) && !!window.chrome: return "chrome";
        case test(/trident/i): return "ie";
        case test(/firefox/i): return "firefox";
        case test(/safari/i): return "safari";
        default: return "other";
    }
})();
console.log(browser)


Si no me gusta, explique por qué.
Alex Nikulin

2
esto mostrará 'safari' mientras navega con 'chrome' en ios
Reza

11

Aquí hay una versión ajustada de 2016 de la respuesta de Rob, que incluye Microsoft Edge y detección de Blink:

( editar : Actualicé la respuesta de Rob anterior con esta información).

// Opera 8.0+ (UA detection to detect Blink/v8-powered Opera)
isOpera = !!window.opera || navigator.userAgent.indexOf(' OPR/') >= 0;
// Firefox 1.0+
isFirefox = typeof InstallTrigger !== 'undefined';
// Safari 3.0+
isSafari = /constructor/i.test(window.HTMLElement) || (function (p) { return p.toString() === "[object SafariRemoteNotification]"; })(!window['safari'] || safari.pushNotification);
// Internet Explorer 6-11
isIE = /*@cc_on!@*/false || !!document.documentMode;
// Edge 20+
isEdge = !isIE && !!window.StyleMedia;
// Chrome 1+
isChrome = !!window.chrome && !!window.chrome.webstore;
// Blink engine detection
isBlink = (isChrome || isOpera) && !!window.CSS;

/* Results: */
console.log("isOpera", isOpera);
console.log("isFirefox", isFirefox);
console.log("isSafari", isSafari);
console.log("isIE", isIE);
console.log("isEdge", isEdge);
console.log("isChrome", isChrome);
console.log("isBlink", isBlink);

La belleza de este enfoque es que se basa en las propiedades del motor del navegador, por lo que cubre incluso navegadores derivados, como Yandex o Vivaldi, que son prácticamente compatibles con los principales navegadores cuyos motores usan. La excepción es Opera, que se basa en la detección de agentes de usuario, pero hoy (es decir, la versión 15 y posteriores) incluso Opera es solo un shell para Blink.


La !!window.MSAssertion;prueba no me funciona en la versión beta de Edge a través de Escritorio remoto. Devuelve falso.
NoR

@NoR ¿Qué versión de Edge estás usando? Es importante
pilau

1
@NoR Oh, estás usando la VM ... El MSAssertiontruco está ajustado a la versión 25. Pero como muchos desarrolladores confían en las VM, intentaré ajustarlo en esta versión anterior. Buena llamada. Gracias.
pilau

1
@NoR actualizado: debe ser a prueba de futuro. El StyleMediaobjeto (en mayúscula) es específico de IE y Edge y no parece ir a ninguna parte.
pilau

1
También he encontrado UAParser un complemento js que aún se mantiene y ha sido muy preciso y fácil de usar.
Issac Gable

9

Puede usar tryy catchusar los diferentes mensajes de error del navegador. IE y edge estaban mezclados, pero utilicé el tipeo de pato de Rob W (basado en este proyecto aquí: https://www.khanacademy.org/computer-programming/i-have-opera/2395080328 ).

var getBrowser = function() {        
    try {
        var e;
        var f = e.width;
    } catch(e) {
        var err = e.toString();

        if(err.indexOf("not an object") !== -1) {
            return "safari";
        } else if(err.indexOf("Cannot read") !== -1) {
            return "chrome";
        } else if(err.indexOf("e is undefined") !== -1) {
            return "firefox";
        } else if(err.indexOf("Unable to get property 'width' of undefined or null reference") !== -1) {
            if(!(false || !!document.documentMode) && !!window.StyleMedia) {
                return "edge";
            } else {
                return "IE";
            }
        } else if(err.indexOf("cannot convert e into object") !== -1) {
            return "opera";
        } else {
            return undefined;
        }
    }
};

Esa es una gran idea: ¡no necesita objetos de "ventana" ni de "navegador"!
Vadim

Mi sugerencia es deshacerse del documento y la ventana por completo. Vea el fragmento IE: devuelva "firefox"; } else if (err.search ("[error de objeto]")! == -1 && e.message! = null && e.description! = null) {return "IE"; } else if (err.search ("no se puede convertir e en objeto")! == -1) {return "opera";
Vadim

¿Cómo se diferencia eso entre IE y edge?
Mason Jones

Extraño, ya no puedo reproducir err.search ("[error de objeto]"). De todos modos, para mí Firefox vs Chrome vs algo más es suficiente. Lo uso en un archivo PAC donde los objetos de ventana y documento no están disponibles.
Vadim

Acabo de descubrir la causa. Parece que para crear un archivo PAC Windows 7 no usa IE11, que está instalado en mi máquina, sino un motor similar a IE7 (probablemente del host de Windows). Entonces err.toString () da "[Error de objeto]" mientras que dentro del IE11 da la cadena "No se puede obtener la propiedad ..." como en su código. Entonces, el código anterior debería fallar con el IE7.
Vadim

8

Gracias a todos. Probé los fragmentos de código aquí en los navegadores recientes: Chrome 55, Firefox 50, IE 11 y Edge 38 y se me ocurrió la siguiente combinación que funcionó para mí para todos ellos. Estoy seguro de que se puede mejorar, pero es una solución rápida para quien necesite:

var browser_name = '';
isIE = /*@cc_on!@*/false || !!document.documentMode;
isEdge = !isIE && !!window.StyleMedia;
if(navigator.userAgent.indexOf("Chrome") != -1 && !isEdge)
{
    browser_name = 'chrome';
}
else if(navigator.userAgent.indexOf("Safari") != -1 && !isEdge)
{
    browser_name = 'safari';
}
else if(navigator.userAgent.indexOf("Firefox") != -1 ) 
{
    browser_name = 'firefox';
}
else if((navigator.userAgent.indexOf("MSIE") != -1 ) || (!!document.documentMode == true )) //IF IE > 10
{
    browser_name = 'ie';
}
else if(isEdge)
{
    browser_name = 'edge';
}
else 
{
   browser_name = 'other-browser';
}
$('html').addClass(browser_name);

Agrega una clase CSS al HTML, con el nombre del navegador.


¿Probaste Chrome en iOS?
Vic

8

No tengo idea si es útil para alguien, pero aquí hay una variante para hacer feliz a TypeScript.

export function getBrowser() {

// Opera 8.0+
if ((!!window["opr"] && !!["opr"]["addons"]) || !!window["opera"] || navigator.userAgent.indexOf(' OPR/') >= 0) {
    return 'opera';
}

// Firefox 1.0+
if (typeof window["InstallTrigger"] !== 'undefined') {
    return 'firefox';
}

// Safari 3.0+ "[object HTMLElementConstructor]" 
if (/constructor/i.test(window["HTMLElement"]) || (function(p) { return p.toString() === "[object SafariRemoteNotification]"; })(!window['safari'] || (typeof window["safari"] !== 'undefined' && window["safari"].pushNotification))) {
    return 'safari';
}

// Internet Explorer 6-11
if (/*@cc_on!@*/false || !!document["documentMode"]) {
    return 'ie';
}

// Edge 20+
if (!(/*@cc_on!@*/false || !!document["documentMode"]) && !!window["StyleMedia"]) {
    return 'edge';
}

// Chrome 1+
if (!!window["chrome"] && !!window["chrome"].webstore) {
    return 'chrome';
}

// Blink engine detection
if (((!!window["chrome"] && !!window["chrome"].webstore) || ((!!window["opr"] && !!["opr"]["addons"]) || !!window["opera"] || navigator.userAgent.indexOf(' OPR/') >= 0)) && !!window["CSS"]) {
    return 'blink';
}

}


¿Por qué tienes algunos ifs con "falso" como condición?
Yonatan Nir

@YonatanNir Creo que está destinado a detectar la compilación condicional: developer.mozilla.org/en-US/docs/Web/JavaScript/…
Lucas Azevedo

5

Detección de navegadores en computadoras de escritorio y dispositivos móviles: Edge, Opera, Chrome, Safari, Firefox, IE

Hice algunos cambios en el código @nimesh ahora también funciona para Edge y se solucionó el problema de Opera:

function getBrowserName() {

    if ( navigator.userAgent.indexOf("Edge") > -1 && navigator.appVersion.indexOf('Edge') > -1 ) {
        return 'Edge';
    }
    else if( navigator.userAgent.indexOf("Opera") != -1 || navigator.userAgent.indexOf('OPR') != -1 )
    {
        return 'Opera';
    }
    else if( navigator.userAgent.indexOf("Chrome") != -1 )
    {
        return 'Chrome';
    }
    else if( navigator.userAgent.indexOf("Safari") != -1)
    {
        return 'Safari';
    }
    else if( navigator.userAgent.indexOf("Firefox") != -1 ) 
    {
        return 'Firefox';
    }
    else if( ( navigator.userAgent.indexOf("MSIE") != -1 ) || (!!document.documentMode == true ) ) //IF IE > 10
    {
        return 'IE';
    }  
    else 
    {
        return 'unknown';
    }
}

Gracias usuario @nimesh: 2063564


4

También hay un método menos "hacky" que funciona para todos los navegadores populares. Google ha incluido una verificación del navegador en su Biblioteca de cierre . En particular, eche un vistazo a goog.userAgenty goog.userAgent.product. De esta manera, también está actualizado si algo cambia en la forma en que se presentan los navegadores (dado que siempre ejecuta la última versión del compilador de cierre).


La mayoría de las respuestas aquí no están relacionadas con ser "hacky" si son el único método confiable. userAgent, como se señaló varias veces, se puede suplantar fácilmente y, por lo tanto, no es confiable.
HoldOffHunger

4

Si necesita saber cuál es la versión numérica de algún navegador en particular, puede usar el siguiente fragmento. Actualmente te dirá la versión de Chrome / Chromium / Firefox:

var match = $window.navigator.userAgent.match(/(?:Chrom(?:e|ium)|Firefox)\/([0-9]+)\./);
var ver = match ? parseInt(match[1], 10) : 0;

2

UAParser es una de las bibliotecas de JavaScript livianas para identificar el navegador, el motor, el sistema operativo, la CPU y el tipo / modelo de dispositivo de la cadena de UserAgent.

Hay un CDN disponible. Aquí, he incluido un código de ejemplo para detectar el navegador usando UAParser.

<!doctype html>
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/ua-parser-js@0/dist/ua-parser.min.js"></script>
<script type="text/javascript">
    var parser = new UAParser();
    var result = parser.getResult();
    console.log(result.browser);     // {name: "Chromium", version: "15.0.874.106"}
</script>
</head>
<body>
</body>
</html>

Ahora puede usar el valor de result.browserpara programar condicionalmente su página.

Tutorial de origen: ¿Cómo detectar el navegador, el motor, el sistema operativo, la CPU y el dispositivo usando JavaScript?


3
¿ Mil líneas de código que llamas ligeras?
deathangel908

1
var BrowserDetect = {
        init: function () {
            this.browser = this.searchString(this.dataBrowser) || "Other";
            this.version = this.searchVersion(navigator.userAgent) || this.searchVersion(navigator.appVersion) || "Unknown";
        },
        searchString: function (data) {
            for (var i = 0; i < data.length; i++) {
                var dataString = data[i].string;
                this.versionSearchString = data[i].subString;

                if (dataString.indexOf(data[i].subString) !== -1) {
                    return data[i].identity;
                }
            }
        },
        searchVersion: function (dataString) {
            var index = dataString.indexOf(this.versionSearchString);
            if (index === -1) {
                return;
            }

            var rv = dataString.indexOf("rv:");
            if (this.versionSearchString === "Trident" && rv !== -1) {
                return parseFloat(dataString.substring(rv + 3));
            } else {
                return parseFloat(dataString.substring(index + this.versionSearchString.length + 1));
            }
        },

        dataBrowser: [
            {string: navigator.userAgent, subString: "Edge", identity: "MS Edge"},
            {string: navigator.userAgent, subString: "MSIE", identity: "Explorer"},
            {string: navigator.userAgent, subString: "Trident", identity: "Explorer"},
            {string: navigator.userAgent, subString: "Firefox", identity: "Firefox"},
            {string: navigator.userAgent, subString: "Opera", identity: "Opera"},  
            {string: navigator.userAgent, subString: "OPR", identity: "Opera"},  

            {string: navigator.userAgent, subString: "Chrome", identity: "Chrome"}, 
            {string: navigator.userAgent, subString: "Safari", identity: "Safari"}       
        ]
    };

    BrowserDetect.init();


    var bv= BrowserDetect.browser;
    if( bv == "Chrome"){
        $("body").addClass("chrome");
    }
    else if(bv == "MS Edge"){
     $("body").addClass("edge");
    }
    else if(bv == "Explorer"){
     $("body").addClass("ie");
    }
    else if(bv == "Firefox"){
     $("body").addClass("Firefox");
    }


$(".relative").click(function(){
$(".oc").toggle('slide', { direction: 'left', mode: 'show' }, 500);
$(".oc1").css({
   'width' : '100%',
   'margin-left' : '0px',
   });
});

0

Esto combina la respuesta original de Rob y la actualización de Pilau para 2016

    var isOpera = !!window.opera || navigator.userAgent.indexOf(' OPR/') >= 0;
    // Opera 8.0+ (UA detection to detect Blink/v8-powered Opera)
var isFirefox = typeof InstallTrigger !== 'undefined';   // Firefox 1.0+
var isSafari = Object.prototype.toString.call(window.HTMLElement).indexOf('Constructor') > 0;
    // At least Safari 3+: "[object HTMLElementConstructor]"
var isChrome = !!window.chrome && !isOpera;              // Chrome 1+
var isIE = /*@cc_on!@*/false || !!document.documentMode;
// Edge 20+
var isEdge = !isIE && !!window.StyleMedia;
// Chrome 1+
var output = 'Detecting browsers by ducktyping:<hr>';
output += 'isFirefox: ' + isFirefox + '<br>';
output += 'isChrome: ' + isChrome + '<br>';
output += 'isSafari: ' + isSafari + '<br>';
output += 'isOpera: ' + isOpera + '<br>';
output += 'isIE: ' + isIE + '<br>';
output += 'isIE Edge: ' + isEdge + '<br>';
document.body.innerHTML = output;

¿Hay algún punto para decirle al usuario qué navegador está usando? Me imagino que ya lo sabrían.
HoldOffHunger

1
@HoldOffHunger su intención principal era más adaptar el código más compatible al navegador activo, en lugar de informar al usuario qué navegador están utilizando. A menos que el navegador que usan esté súper desactualizado y haya sido excluido de la compatibilidad con versiones anteriores, en el que no estaría de más hacer saber al usuario que pueden beneficiarse de una mejor experiencia si cambian a algo más actualizado
Joe Borg

0

Aquí encontrará qué navegador está ejecutando.

function isValidBrowser(navigator){

            var isChrome =  navigator.indexOf('chrome'),
            isFireFox= navigator.indexOf('firefox'),
            isIE = navigator.indexOf('trident') ,
            isValidChromeVer = parseInt(navigator.substring(isChrome+7, isChrome+8)) >= 4,
            isValidFireForVer = parseInt(navigator.substring(isFireFox+8, isFireFox+9)) >= 3,
            isValidIEVer = parseInt(navigator.substring(isIE+8, isIE+9)) >= 7;

            if((isChrome > -1 && isValidChromeVer){ console.log("Chrome Browser")}

            if(isFireFox > -1 && isValidFireForVer){ console.log("FireFox  Browser")}

            if(isIE > -1 && isValidIEVer)){ console.log("IE Browser")}


        }

0

Podemos usar los siguientes métodos de utilidad

utils.isIE = function () {
        var ver = navigator.userAgent;
        return ver.indexOf("MSIE") !== -1 || ver.indexOf("Trident") !== -1; // need to check for Trident for IE11
    };

    utils.isIE32 = function () {
        return (utils.isIE() && navigator.appVersion.indexOf('Win64') === -1);
    };

    utils.isChrome = function () {
        return (window.chrome);
    };

    utils.isFF64 = function () {
        var agent = navigator.userAgent;
        return (agent.indexOf('Win64') >= 0 && agent.indexOf('Firefox') >= 0);
    };

    utils.isFirefox = function () {
        return (navigator.userAgent.toLowerCase().indexOf('firefox') > -1);
    };

0
const isChrome = /Chrome/.test(navigator.userAgent)
const isFirefox = /Firefox/.test(navigator.userAgent)

Lamentablemente, no es una buena respuesta. Edge tiene Chrome en su mensaje de UserAgent. Es mejor usar !! window.chrome && (!! window.chrome.webstore || !! window.chrome.runtime);
Przemo

-3

Una línea simple y simple de código JavaScript le dará el nombre del navegador:

function GetBrowser()
{
    return  navigator ? navigator.userAgent.toLowerCase() : "other";
}

16
El UserAgent solo no nos dice lo suficiente. Por ejemplo, mi agente de usuario es "Mozilla / 5.0 (Macintosh; Intel Mac OS X 10_10_4) AppleWebKit / 537.36 (KHTML, like Gecko) Chrome / 45.0.2454.85 Safari / 537.36", que menciona Mozilla, Chrome y Safari. ¿Qué tipo de navegador soy?
eremzeit

Lo siento, pero no te comprendo "¿Qué tipo de navegador soy?" que quieres conseguir
Nirav Mehta

1
@NiravMehta Lo que quiso decir es que navigator.userAgentte dice que tienes todos los navegadores posibles ... Así que esto realmente no es confiable, el único caso que funcionaría es si el usuario solo tiene un navegador.
Baldráni

1
Esta no es una forma confiable de detectar el navegador. Algunos agentes de uso incluyen tanto el cromo como el safari, por lo que no hay forma de detectar cuál deberíamos considerar y, por último, la página web puede modificar el agente de uso.
Juvenik
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.