name - javascript get device information
¿Cómo detectar los navegadores Safari, Chrome, IE, Firefox y Opera? (16)
Aquí hay una versión ajustada para 2016 de la respuesta de Rob, que incluye Microsoft Edge y la detección de Blink:
( Editar : Actualicé la respuesta de Rob arriba 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 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 del agente de usuario, pero hoy en día (es decir, en la versión 15 y superior) incluso Opera es solo una cáscara para Blink.
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.
Aquí hay varias bibliotecas prominentes que manejan la detección del navegador.
github.com/lancedikson/bowser by 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 by bestiejs - 1912 ★ s - Última actualización 23 de enero de 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>
github.com/darcyclarke/Detect.js by darcyclarke - 501 ★ 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>
jQuery Browser by gabceb - 485 ★ 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>
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 debe dirigir cualquier pregunta de estilo canIuse . La detección del navegador es realmente sólo para las sutilezas.
Otras lecturas
- Desbordamiento de pila : ¿Detección del navegador en JavaScript?
- Desbordamiento de pila : ¿Cómo puede detectar la versión de un navegador?
Aquí usted descubre qué navegador está funcionando.
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")}
}
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 alrededor. Dado que el navegador tampoco puede cambiar realmente sin cargarse de nuevo, he hecho que almacene en caché el 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());
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 para falsificar este valor.
He escrito un método para detectar los navegadores mediante duck-typing .
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 características cuando sea posible.
Demostració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 fiabilidad
El método anterior dependía de las propiedades del motor de representación ( -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 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 el constructor
StyleMedia. Excluyendo Trident nos deja con Edge. - Firefox: API de Firefox para instalar complementos:
InstallTrigger - Chrome: el objeto
chromeglobal, que contiene varias propiedades, incluido un objetochrome.webstoredocumentado. - Safari: un patrón de denominación único en su denominación de constructores. Este es el método menos duradero de todas las propiedades listadas y adivina qué? En Safari 9.1.3 se solucionó. Así que estamos
SafariRemoteNotificationconSafariRemoteNotification, que se introdujo después de la versión 7.1, para cubrir todos los Safaris a partir de 3.0 y posteriores. - 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 de UA se parece a Chrome, pero con la adición de "OPR". En esta versión, el objeto
chromeestá definido (perochrome.webstoreno lo está). Dado que Opera se esfuerza por clonar Chrome, utilizo el agente de usuario sniffing para este propósito. - Actualización 2:
!!window.opr && opr.addonsse puede usar para detectar Opera 20+ (evergreen).
- Actualización 1: Opera 15 ha sido lanzado , su cadena de UA se parece a Chrome, pero con la adición de "OPR". En esta versión, el objeto
- Blink:
CSS.supports()se introdujo en Blink una vez que GoogleCSS.supports()Chrome 28. Por supuesto, es el mismo Blink que se usa en Opera.
Probado con éxito en:
- Firefox 0.8 - 61
- Chrome 1.0 - 68
- Opera 8.0 - 34
- Safari 3.0 - 10
- IE 6 - 11
- Edge - 20-42
Actualizado en noviembre de 2016 para incluir la detección de navegadores Safari desde 9.1.3 y superiores
Actualizado en agosto de 2018 para actualizar las últimas pruebas exitosas en Chrome, Firefox IE y edge.
Gracias a todos. He probado 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 todos ellos. Estoy seguro de que se puede mejorar, pero es una solución rápida para quien lo 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.
Puede usar try and catch para usar los diferentes mensajes de error del navegador. IE y edge se confundieron, pero utilicé el tip 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;
}
}
};
Sé que puede ser una exageración 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();
Si necesita saber cuál es la versión numérica de algún navegador en particular, puede usar el siguiente fragmento de código. 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;
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 y goog.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).
Una simple línea de código JavaScript le dará el nombre del navegador:
function GetBrowser()
{
return navigator ? navigator.userAgent.toLowerCase() : "other";
}
Variante corta
var browser = (function(agent){
switch(true){
case agent.indexOf("edge") > -1: return "edge";
case agent.indexOf("opr") > -1 && !!window.opr: return "opera";
case agent.indexOf("chrome") > -1 && !!window.chrome: return "chrome";
case agent.indexOf("trident") > -1: return "ie";
case agent.indexOf("firefox") > -1: return "firefox";
case agent.indexOf("safari") > -1: return "safari";
default: return "other";
}
})(window.navigator.userAgent.toLowerCase());
UAParser es una de las bibliotecas ligeras de JavaScript para identificar el navegador, motor, sistema operativo, CPU y tipo / modelo de dispositivo de la cadena userAgent.
Hay un CDN disponible. Aquí, he incluido un código de ejemplo para detectar el navegador utilizando 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.
Tutorial de origen: ¿Cómo detectar el navegador, el motor, el sistema operativo, la CPU y el dispositivo con JavaScript?
This 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;
Puedes probar 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 saber solo la versión del navegador IE, puede seguir el código que se encuentra 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>
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'',
});
});