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


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

Necesito el código para reconocer el navegador del usuario y redirigir (al hacer clic en un botón de instalación) para descargar el complemento correspondiente.


540
2018-03-23 23:06


origen


Respuestas:


Google para la detección fiable del navegador a menudo da como resultado la verificación de la cadena de agente de usuario. Este método es no confiable, porque es trivial parodiar este valor.
He escrito un método para detectar navegadores por teclear patos.

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

Manifestación: https://jsfiddle.net/311aLtkz/

// 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+
var isChrome = !!window.chrome && !!window.chrome.webstore;

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

Análisis de confiabilidad

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

  • Internet Explorer: JScript Compilación condicional (hasta IE9) y document.documentMode.
  • Edge: en los navegadores Trident y Edge, la implementación de Microsoft expone el StyleMedia constructor. Excluir Trident nos deja con Edge.
  • Firefox: la API de Firefox para instalar complementos: InstallTrigger
  • Chrome: el global chrome objeto, que contiene varias propiedades, incluida una documentada chrome.webstore objeto.
  • Safari: Un patrón de nomenclatura único en su nombre de constructores. Este es el método menos duradero de todas las propiedades listadas y ¿adivinen qué? En Safari 9.1.3 fue corregido. Así que estamos contrastando SafariRemoteNotification, que se introdujo después de la versión 7.1, para cubrir todos los Safaris desde 3.0 y más.
  • Ópera: window.opera ha existido por años, pero será eliminado cuando Opera reemplaza 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, chrome objeto está definido (pero chrome.webstore no es). Como Opera intenta clonar Chrome, utilizo el rastreo de agente de usuario para este propósito.
    • Actualización 2: !!window.opr && opr.addons se puede usar para detectar Opera 20+ (hojas perennes).
  • Parpadeo: CSS.supports()  fue presentado en Blink una vez que Google conectó Chrome 28. Es, por supuesto, el mismo Blink utilizado en Opera.

Exitosamente probado en:

  • Firefox 0.8 - 44
  • Chrome 1.0 - 48
  • Opera 8.0 - 34
  • Safari 3.0 - 10
  • IE 6 - 11
  • Edge - 20-25

Actualizado en noviembre de 2016 para incluir la detección de navegadores Safari desde 9.1.3 y versiones posteriores


1218
2017-10-14 10:44



Puede probar la siguiente forma para 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 saber solamente la versión del navegador IE, entonces 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>

82
2018-05-13 20:55



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

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

49
2017-07-17 15:19



En caso de que alguien encuentre esto útil, he hecho La respuesta de Rob W en una función que devuelve la cadena del navegador en lugar de tener múltiples variables flotando. Dado que el navegador tampoco puede realmente cambiarse sin volver a cargarlo, he hecho que el resultado sea una caché para evitar que tenga que resolverse 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());


37
2018-01-17 16:27



Aquí hay una versión ajustada de 2016 de la respuesta de Rob, que incluye Microsoft Edge y la 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);

Lo bueno de este enfoque es que depende de las propiedades del motor del navegador, por lo que cubre incluso los navegadores derivados, como Yandex o Vivaldi, que son prácticamente compatibles con los principales navegadores cuyos motores utilizan. La excepción es Opera, que se basa en el rastreo de agentes de usuario, pero hoy (es decir, ver. 15 y posteriores) incluso Opera es en sí misma solo un shell para Blink.


9
2018-01-31 08:12



Gracias a todos. Probé los fragmentos de código aquí en los navegadores recientes: Chrome 55, Firefox 50, IE 11 y Edge 38 y obtuve la siguiente combinación que funcionó para todos. 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.


7
2017-10-25 17:50



Puedes usar try y catch para usar los diferentes mensajes de error del navegador. IE y Edge estaban mezclados, pero utilicé el tipado de patos 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;
        }
    }
};

6
2018-03-23 03:56



También hay un método menos "hacky" que funciona para todos los navegadores populares. Google ha incluido una verificación de navegador en su Biblioteca de clausura. En particular, eche un vistazo a goog.userAgent y goog.userAgent.product. De esta forma, también estará 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).


4
2018-03-30 21:13



Aquí hay varias bibliotecas destacadas que manejan la detección del navegador.

Bowser por lancedikson - 2.713 ★ s - Última actualización 12 de marzo de 2018 - 2.9KB

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

Platform.js por bestiejs - 1912 ★ s - Última actualización 23 ene. 2018 - 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>

Detect.js por darcyclarke - 501 ★ s - Última actualización 26 de octubre, 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>

Navegador jQuery por gabceb - 485 ★ s - Última actualización 23 nov. 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>

Detección del navegador (ARCHIVO) 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,230 ★ s - Última actualización 5 de febrero de 2018
  • Modernizr - 22,320 ★ s - Última actualización 4 de marzo de 2018 - Para vencer a un caballo muerto, la detección de características debería conducir cualquier Puedo usar preguntas de estilo. La detección del navegador es realmente solo por sutilezas.

Otras lecturas


4
2018-03-23 11:02