0
575
Views¿Cómo detectar los navegadores Safari, Chrome, IE, Firefox y Opera?
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?
24 answers
Answer question0
Simple, una sola línea de código JavaScript le dará el nombre del navegador:
function GetBrowser() { return navigator ? navigator.userAgent.toLowerCase() : "other"; }0
Puede intentar seguir la 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("Edg") != -1 ) { alert('Edge'); } 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 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
<!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>0
En caso de que alguien encuentre esto útil, convertí 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 cambiar realmente sin cargar todo de nuevo, hice que almacene en caché el resultado para evitar que necesite 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());0
Aquí hay una versión ajustada de 2016 de la respuesta de Rob, que incluye Microsoft Edge y detección de parpadeo:
( 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 utilizan. La excepción es Opera, que se basa en el rastreo del agente de usuario, pero hoy (es decir, versión 15 y superior) incluso Opera es en sí mismo solo un caparazón para Blink.
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;0
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;0
Puede usar try and catch para usar los diferentes mensajes de error del navegador. IE y edge se confundieron, pero usé el tipo 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; } } };0
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 me funcionó para todos ellos. Seguro que es mejorable, 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.
0
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.userAgent ygoog.userAgent.product . De esta manera, 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).
0
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
Aquí puede averiguar 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
Variante corta ( actualización del 10 de julio de 2020 corrección de detección de navegador móvil )
var browser = (function() { var test = function(regexp) {return regexp.test(window.navigator.userAgent)} switch (true) { case test(/edg/i): return "Microsoft Edge"; case test(/trident/i): return "Microsoft Internet Explorer"; case test(/firefox|fxios/i): return "Mozilla Firefox"; case test(/opr\//i): return "Opera"; case test(/ucbrowser/i): return "UC Browser"; case test(/samsungbrowser/i): return "Samsung Browser"; case test(/chrome|chromium|crios/i): return "Google Chrome"; case test(/safari/i): return "Apple Safari"; default: return "Other"; } })(); console.log(browser)0
UAParser es una de las bibliotecas de JavaScript ligeras para identificar el navegador, el motor, el sistema operativo, la CPU y el tipo/modelo de dispositivo a partir de la cadena 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.browser para programar condicionalmente su página.
Fuente Tutorial: ¿Cómo detectar el navegador, el motor, el sistema operativo, la CPU y el dispositivo usando JavaScript?
0
No tengo idea si es útil para alguien, pero aquí hay una variante que haría 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'; } }0
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 de @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 @nimesh usuario:2063564
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)0
Puede usar Detect-browser.js, biblioteca de JavaScript que detecta e imprime un objeto de información del navegador, incluido el idioma/nombre del navegador, el agente de usuario, el tipo de dispositivo, el sistema operativo del usuario, el referente, en línea/sin conexión, la zona horaria del usuario, la resolución de pantalla y la cookie habilitada. .
Consíguelo desde aquí detect-browser.js
te dará algo así:
0
Sencillo:
var OSName="Unknown OS"; if (navigator.appVersion.indexOf("Win")!=-1) OSName="Windows"; if (navigator.appVersion.indexOf("Mac")!=-1) OSName="MacOS"; if (navigator.appVersion.indexOf("X11")!=-1) OSName="UNIX"; if (navigator.appVersion.indexOf("Linux")!=-1) OSName="Linux"; if (navigator.appVersion.indexOf("Linux x86_64")!=-1) OSName="Ubuntu"; var nVer = navigator.appVersion; var nAgt = navigator.userAgent; var browserName = navigator.appName; var fullVersion = ''+parseFloat(navigator.appVersion); var majorVersion = parseInt(navigator.appVersion,10); var nameOffset,verOffset,ix; // In Opera, the true version is after "Opera" or after "Version" if ((verOffset=nAgt.indexOf("Opera"))!=-1) { browserName = "Opera"; fullVersion = nAgt.substring(verOffset+6); if ((verOffset=nAgt.indexOf("Version"))!=-1) fullVersion = nAgt.substring(verOffset+8); } // In MSIE, the true version is after "MSIE" in userAgent else if ((verOffset=nAgt.indexOf("MSIE"))!=-1) { browserName = "Microsoft Internet Explorer"; fullVersion = nAgt.substring(verOffset+5); } // In Chrome, the true version is after "Chrome" else if ((verOffset=nAgt.indexOf("Chrome"))!=-1) { browserName = "Chrome"; fullVersion = nAgt.substring(verOffset+7); } // In Safari, the true version is after "Safari" or after "Version" else if ((verOffset=nAgt.indexOf("Safari"))!=-1) { browserName = "Safari"; fullVersion = nAgt.substring(verOffset+7); if ((verOffset=nAgt.indexOf("Version"))!=-1) fullVersion = nAgt.substring(verOffset+8); } // In Firefox, the true version is after "Firefox" else if ((verOffset=nAgt.indexOf("Firefox"))!=-1) { browserName = "Firefox"; fullVersion = nAgt.substring(verOffset+8); } // In most other browsers, "name/version" is at the end of userAgent else if ( (nameOffset=nAgt.lastIndexOf(' ')+1) < (verOffset=nAgt.lastIndexOf('/')) ) { browserName = nAgt.substring(nameOffset,verOffset); fullVersion = nAgt.substring(verOffset+1); if (browserName.toLowerCase()==browserName.toUpperCase()) { browserName = navigator.appName; } } // trim the fullVersion string at semicolon/space if present if ((ix=fullVersion.indexOf(";"))!=-1) fullVersion=fullVersion.substring(0,ix); if ((ix=fullVersion.indexOf(" "))!=-1) fullVersion=fullVersion.substring(0,ix); majorVersion = parseInt(''+fullVersion,10); if (isNaN(majorVersion)) { fullVersion = ''+parseFloat(navigator.appVersion); majorVersion = parseInt(navigator.appVersion,10); } document.write('' +'Hey! i see you\'re using '+browserName+'! <br>' +'The full version of it is '+fullVersion+'. <br>' +'Your major version is '+majorVersion+', <br>' +'And your "navigator.appName" is '+navigator.appName+'. <br>' +'Your "navigator.userAgent" is '+navigator.userAgent+'. <br>' ) document.write('And, your OS is '+OSName+'. <br>');0
Puedes detectarlo como:
if (typeof navigator !== 'undefined' && navigator.userAgent && navigator.userAgent.toLowerCase().match(/firefox\/(\d+)/)) { alert('Firefox'); }0
Aquí está mi solución personalizada.
const inBrowser = typeof window !== 'undefined' const UA = inBrowser && window.navigator.userAgent.toLowerCase() const isIE = UA && /; msie|trident/i.test(UA) && !/ucbrowser/i.test(UA).test(UA) const isEdge = UA && /edg/i.test(UA) const isAndroid = UA && UA.indexOf('android') > 0 const isIOS = UA && /iphone|ipad|ipod|ios/i.test(UA) const isChrome = UA && /chrome|crios/i.test(UA) && !/opr|opera|chromium|edg|ucbrowser|googlebot/i.test(UA) const isGoogleBot = UA && /googlebot/i.test(UA) const isChromium = UA && /chromium/i.test(UA) const isUcBrowser = UA && /ucbrowser/i.test(UA) const isSafari = UA && /safari/i.test(UA) && !/chromium|edg|ucbrowser|chrome|crios|opr|opera|fxios|firefox/i.test(UA) const isFirefox = UA && /firefox|fxios/i.test(UA) && !/seamonkey/i.test(UA) const isOpera = UA && /opr|opera/i.test(UA) const isMobile = /\b(BlackBerry|webOS|iPhone|IEMobile)\b/i.test(UA) || /\b(Android|Windows Phone|iPad|iPod)\b/i.test(UA) const isSamsung = UA && /samsungbrowser/i.test(UA) const isIPad = UA && /ipad/.test(UA) const isIPhone = UA && /iphone/.test(UA) const isIPod = UA && /ipod/.test(UA) console.log({ UA, isAndroid, isChrome, isChromium, isEdge, isFirefox, isGoogleBot, isIE, isMobile, isIOS, isIPad, isIPhone, isIPod, isOpera, isSafari, isSamsung, isUcBrowser, } }0
Para verificar el navegador IE usando el siguiente código.
console.log(/MSIE|Trident/.test(window.navigator.userAgent))O
var isIE = !!document.documentMode; console.log(isIE)Gracias
0
import getAgent, { getAccurateAgent } from "@egjs/agent"; const agent = getAgent(); getAccurateAgent().then((accurate_agent)=>{ console.log(agent,'accurate.'); }) console.log(agent);