¿Cómo detectar los navegadores Safari, Chrome, IE, Firefox y Opera?

El tutorial o código que verás en este post es la resolución más rápida y válida que encontramos a esta inquietud o problema.

Solución:

Buscar en Google una detección confiable del navegador a menudo resulta en verificar el agente de usuario string. Este método es no confiable, porque es trivial falsificar este valor.
Escribí un método para detectar navegadores escribiendo pato.

Utilice el método de detección del navegador solo si es realmente necesario, como mostrar instrucciones específicas del navegador para instalar una extensión. Utilice la detección de características 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' && window['safari'].pushNotification));

// Internet Explorer 6-11
var isIE = /*@[email protected]*/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:
';
output += 'isFirefox: ' + isFirefox + '
';
output += 'isChrome: ' + isChrome + '
';
output += 'isSafari: ' + isSafari + '
';
output += 'isOpera: ' + isOpera + '
';
output += 'isIE: ' + isIE + '
';
output += 'isEdge: ' + isEdge + '
';
output += 'isEdgeChromium: ' + isEdgeChromium + '
';
output += 'isBlink: ' + isBlink + '
';
document.body.innerHTML = output;

Análisis de confiabilidad

El 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 sólida, cambié a 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 el StyleMedia constructor. Excluir a Trident nos deja con Edge.
• Edge (basado en cromo): el agente de usuario incluye el valor “Edg /[version]”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 global chrome objeto, que contiene varias propiedades, incluida una documentada chrome.webstore objeto.
• Actualización 3 chrome.webstore está obsoleto e indefinido en versiones recientes
• Safari: un patrón de nomenclatura único en su nomenclatura de constructores. Este es el método menos duradero de todas las propiedades enumeradas y ¿adivinen qué? En Safari 9.1.3 se corrigió. Así que estamos comprobando SafariRemoteNotification, que se introdujo después de la versión 7.1, para cubrir todos los Safaris desde 3.0 en adelante.
• Ópera: window.opera ha existido durante 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 UA string parece Chrome, pero con la adición de “OPR”. En esta versión el chrome el objeto está definido (pero chrome.webstore no lo es). Dado que Opera se esfuerza por clonar Chrome, utilizo la función de rastreo de agentes de usuario para este propósito.
• Actualización 2: !!window.opr && opr.addons se puede utilizar para detectar Opera 20+ (perenne).
• Parpadear: CSS.supports() se introdujo en Blink una vez que Google encendió Chrome 28. Por supuesto, es el mismo Blink que se usa 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
• Desarrollo de borde: 80.0.361.9

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

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 desaprobación de window.chrome.webstore) e incluir las últimas pruebas exitosas en Chrome.

Actualizado en diciembre de 2019 para agregar Edge basado en la detección de Chromium (basado en el comentario de @Nimesh).

Puede probar la siguiente forma para verificar la versión del navegador.

    
    
    
    
What is the name(s) of your browser?
    Try it
    

    

    
    

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

Click on Try button to check IE Browser version.

Try it

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

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

Si te ha resultado de provecho este post, nos gustaría que lo compartas con el resto juniors de este modo nos ayudas a dar difusión a esta información.

---

---

Utiliza Nuestro Buscador