Buscar..
Introducción
Los navegadores, a medida que evolucionaron, ofrecieron más funciones a Javascript. Pero a menudo estas características no están disponibles en todos los navegadores. A veces, pueden estar disponibles en un navegador, pero aún no se han lanzado en otros navegadores. Otras veces, estas características se implementan de manera diferente por diferentes navegadores. La detección del navegador se vuelve importante para garantizar que la aplicación que desarrolle se ejecute sin problemas en diferentes navegadores y dispositivos.
Observaciones
Utilice la detección de características cuando sea posible.
Existen algunas razones para usar la detección del navegador (por ejemplo, dar instrucciones a un usuario sobre cómo instalar un complemento del navegador o borrar su caché), pero en general la detección de características se considera la mejor práctica. Si está utilizando la detección del navegador, asegúrese de que sea absolutamente necesario.
Modernizr es una biblioteca de JavaScript popular y ligera que facilita la detección de características.
Método de detección de características
Este método busca la existencia de cosas específicas del navegador. Esto sería más difícil de falsificar, pero no se garantiza que sea una prueba de futuro.
// Opera 8.0+
var isOpera = (!!window.opr && !!opr.addons) || !!window.opera || navigator.userAgent.indexOf(' OPR/') >= 0;
// Firefox 1.0+
var isFirefox = typeof InstallTrigger !== 'undefined';
// At least Safari 3+: "[object HTMLElementConstructor]"
var isSafari = Object.prototype.toString.call(window.HTMLElement).indexOf('Constructor') > 0;
// 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;
Probado con éxito en:
- Firefox 0.8 - 44
- Cromo 1.0 - 48
- Opera 8.0 - 34
- Safari 3.0 - 9.0.3
- IE 6 - 11
- Edge - 20-25
Crédito a Rob W
Método de biblioteca
Un enfoque más fácil para algunos sería utilizar una biblioteca de JavaScript existente. Esto se debe a que puede ser difícil garantizar que la detección del navegador sea correcta, por lo que puede tener sentido utilizar una solución de trabajo si hay una disponible.
Una biblioteca de detección de navegador popular es Bowser .
Ejemplo de uso:
if (bowser.msie && bowser.version >= 6) {
alert('IE version 6 or newer');
}
else if (bowser.firefox) {
alert('Firefox');
}
else if (bowser.chrome) {
alert('Chrome');
}
else if (bowser.safari) {
alert('Safari');
}
else if (bowser.iphone || bowser.android) {
alert('Iphone or Android');
}
Detección de agente de usuario
Este método obtiene el agente de usuario y lo analiza para encontrar el navegador. El nombre y la versión del navegador se extraen del agente de usuario a través de una expresión regular. Sobre la base de estos dos, se devuelve el <browser name> <version> .
Los cuatro bloques condicionales que siguen al código de coincidencia de agente de usuario están destinados a explicar las diferencias en los agentes de usuario de diferentes navegadores. Por ejemplo, en el caso de la ópera, ya que utiliza el motor de renderizado Chrome , hay un paso adicional para ignorar esa parte.
Tenga en cuenta que este método puede ser fácilmente falsificado por un usuario.
navigator.sayswho= (function(){
var ua= navigator.userAgent, tem,
M= ua.match(/(opera|chrome|safari|firefox|msie|trident(?=\/))\/?\s*(\d+)/i) || [];
if(/trident/i.test(M[1])){
tem= /\brv[ :]+(\d+)/g.exec(ua) || [];
return 'IE '+(tem[1] || '');
}
if(M[1]=== 'Chrome'){
tem= ua.match(/\b(OPR|Edge)\/(\d+)/);
if(tem!= null) return tem.slice(1).join(' ').replace('OPR', 'Opera');
}
M= M[2]? [M[1], M[2]]: [navigator.appName, navigator.appVersion, '-?'];
if((tem= ua.match(/version\/(\d+)/i))!= null) M.splice(1, 1, tem[1]);
return M.join(' ');
})();
Crédito a kennebec