¿Cómo detectar la versión de mi navegador y el sistema operativo usando JavaScript?

113

Intenté usar el código a continuación, pero solo muestra resultados en Chrome y Mozilla no funciona en IE6. 

<div id="example"></div>

<script type="text/javascript">

txt = "<p>Browser CodeName: " + navigator.appCodeName + "</p>";
txt+= "<p>Browser Name: " + navigator.appName + "</p>";
txt+= "<p>Browser Version: " + navigator.appVersion + "</p>";
txt+= "<p>Cookies Enabled: " + navigator.cookieEnabled + "</p>";
txt+= "<p>Platform: " + navigator.platform + "</p>";
txt+= "<p>User-agent header: " + navigator.userAgent + "</p>";

document.getElementById("example").innerHTML=txt;

</script>

Salida:

Browser CodeName: Mozilla

Browser Name: Netscape

Browser Version: 5.0 (Windows)

Cookies Enabled: true

Platform: Win32

User-agent header: Mozilla/5.0 (Windows NT 5.1; rv:12.0) Gecko/20100101 Firefox/12.0

Solo necesito obtener la versión "Firefox / 12.0".

javascript browser operating-system version capri
fuente
3
quirksmode.org/js/detect.html por favor revíselo una vez que esto pueda ayudarlo ..
Jalpesh Patel
Se pueden encontrar respuestas relevantes adicionales sobre esto y esto 'casi' engaños
Matthijs Wessels
Verifique mi respuesta desde este enlace ( stackoverflow.com/questions/9847580/… )
Malki Mohamed

Respuestas:

167

Detectando los detalles del navegador:

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(''
 +'Browser name  = '+browserName+'<br>'
 +'Full version  = '+fullVersion+'<br>'
 +'Major version = '+majorVersion+'<br>'
 +'navigator.appName = '+navigator.appName+'<br>'
 +'navigator.userAgent = '+navigator.userAgent+'<br>'
)

Fuente JavaScript: nombre del navegador .
Consulte JSFiddle para detectar detalles del navegador .

Detectando SO:

// This script sets OSName variable as follows:
// "Windows"    for all versions of Windows
// "MacOS"      for all versions of Macintosh OS
// "Linux"      for all versions of Linux
// "UNIX"       for all other UNIX flavors 
// "Unknown OS" indicates failure to detect the OS

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";

document.write('Your OS: '+OSName);

fuente JavaScript: detección de SO .
Consulte JSFiddle para detectar detalles del sistema operativo .

Mostrar fragmento de código

hims056
fuente
1
¿Sabes dónde puedo encontrar todos los valores posibles de appVersion? Bueno, ¿todos los posibles valores del sistema operativo que usa appVersion?
John Odom
3
@JohnOdom Los nuevos sistemas (por ejemplo, la próxima caja de Steam) probablemente tengan sus propios nombres; y los sistemas existentes pueden cambiar sus nombres o abreviaturas. Nunca estará actualizado, a menos que use algún tipo de base de datos global para obtener esa información; ya que esto es completamente propietario. Quizás algún día, Google, W3, etc. ofrezcan una API para crowdsourcing y pongan a disposición del público todos los diferentes nombres de sistemas y sus relaciones que recopilen de sus usuarios.
Domi
1
verOffset = nAgt.indexOf ("Opera"))! = - 1. Esto no funcionará para Opera 20 y superior.
parth.hirpara
2
No se puede detectar Edge.
Mohan Singh
1
Este Javascript no está actualizado. Reporta Edge e IE 11 como "Netscape 5". Sugiera el uso de una biblioteca mantenida para esta funcionalidad como github.com/faisalman/ua-parser-js
James Boutcher
20

Me entristece decir: no tenemos suerte en este caso.

Me gustaría referirlo al autor de WhichBrowser : Everybody Miente .

Básicamente, ningún navegador es honesto. No importa si usa Chrome o IE, ambos le dirán que son "Mozilla Netscape" con soporte para Gecko y Safari. Pruébelo usted mismo en cualquiera de los violines que vuelan en este hilo:

violín de hims056

El violín de Hariharan

o cualquier otro ... Pruébalo con Chrome (que aún podría tener éxito), luego pruébalo con una versión reciente de IE y llorarás. Por supuesto, existen heurísticas para hacerlo bien, pero será tedioso comprender todos los casos extremos y es muy probable que dejen de funcionar dentro de un año.

Tome su código, por ejemplo:

<div id="example"></div>
<script type="text/javascript">
txt = "<p>Browser CodeName: " + navigator.appCodeName + "</p>";
txt+= "<p>Browser Name: " + navigator.appName + "</p>";
txt+= "<p>Browser Version: " + navigator.appVersion + "</p>";
txt+= "<p>Cookies Enabled: " + navigator.cookieEnabled + "</p>";
txt+= "<p>Platform: " + navigator.platform + "</p>";
txt+= "<p>User-agent header: " + navigator.userAgent + "</p>";
document.getElementById("example").innerHTML=txt;
</script>

Chrome dice:

Nombre del código del navegador: Mozilla

Nombre del navegador: Netscape

Versión del navegador: 5.0 (Windows NT 6.1; WOW64) AppleWebKit / 537.36 (KHTML, como Gecko) Chrome / 40.0.2214.115 Safari / 537.36

Cookies habilitadas: verdadero

Plataforma: Win32

Encabezado de agente de usuario: Mozilla / 5.0 (Windows NT 6.1; WOW64) AppleWebKit / 537.36 (KHTML, como Gecko) Chrome / 40.0.2214.115 Safari / 537.36

IE dice:

Nombre del código del navegador: Mozilla

Nombre del navegador: Netscape

Versión del navegador: 5.0 (Windows NT 6.1; WOW64; Trident / 7.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; .NET4.0C; .NET4 .0E; InfoPath.3; rv: 11.0) como Gecko

Cookies habilitadas: verdadero

Plataforma: Win32

Encabezado de agente de usuario: Mozilla / 5.0 (Windows NT 6.1; WOW64; Trident / 7.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; .NET4. 0C; .NET4.0E; InfoPath.3; rv: 11.0) como Gecko

Al menos Chrome todavía tiene una cadena que contiene "Chrome" con el número de versión exacto. Pero, para IE, debe extrapolar las cosas que admite para realmente averiguarlo (quién más se jactaría de que son compatibles .NETo Media Center: P), y luego compararlo con el rv:al final para obtener el número de versión. Por supuesto, incluso una heurística tan sofisticada podría fallar tan pronto como salga IE 12 (o como quieran llamarlo).

Domi
fuente
2
Está mostrando el navegador Chrome para Opera.
Rajkishor Sahu
algunas de esas propiedades se "mantienen por compatibilidad con versiones anteriores", por ejemplo, todos los navegadores devolverán "Netscape" para navigator.appName→ developer.mozilla.org/en-US/docs/Web/API/NavigatorID
Philipp
18

Hay una biblioteca para este propósito: https://github.com/bestiejs/platform.js#readme

Entonces puedes usarlo de esta manera

// example 1
platform.os; // 'Windows Server 2008 R2 / 7 x64'

// example 2 on an iPad
platform.os; // 'iOS 5.0'

// you can also access on the browser and some other properties
platform.name; // 'Safari'
platform.version; // '5.1'
platform.product; // 'iPad'
platform.manufacturer; // 'Apple'
platform.layout; // 'WebKit'

// or use the description to put all together
platform.description; // 'Safari 5.1 on Apple iPad (iOS 5.0)'
timaschew
fuente
1
Tenga en cuenta que de todos los enlaces a las bibliotecas de github en las respuestas aquí, esta biblioteca parece ser la más actualizada (escrito en mayo de 2018, con la última confirmación 'hace 3 meses')
Ideogram
12

Para detectar el sistema operativo usando JavaScript, es mejor usar navigator.userAgent en lugar de navigator.appVersion 

{
  var OSName = "Unknown OS";
  if (navigator.userAgent.indexOf("Win") != -1) OSName = "Windows";
  if (navigator.userAgent.indexOf("Mac") != -1) OSName = "Macintosh";
  if (navigator.userAgent.indexOf("Linux") != -1) OSName = "Linux";
  if (navigator.userAgent.indexOf("Android") != -1) OSName = "Android";
  if (navigator.userAgent.indexOf("like Mac") != -1) OSName = "iOS";
  console.log('Your OS: ' + OSName);
}
Expandir fragmento

Nisal Edu
fuente
1
Voto a favor. Además, sería muy útil si pudiera explicar por qué exactamente es mejor :) Además, parece que 'UNIX / X11' se perdió.
Systems Rebooter
@SystemsRebooter Gracias por el comentario, puede agregarlos como otros.
Nisal Edu
1
gran respuesta, esto fue muy útil
Jeremy Bader
9

El script de PPK es LA autoridad para este tipo de cosas, como dijo @Jalpesh, esto podría indicarle el camino correcto

var wn = window.navigator,
        platform = wn.platform.toString().toLowerCase(),
        userAgent = wn.userAgent.toLowerCase(),
        storedName;

// ie
    if (userAgent.indexOf('msie',0) !== -1) {
        browserName = 'ie';
        os = 'win';
        storedName = userAgent.match(/msie[ ]\d{1}/).toString();
        version = storedName.replace(/msie[ ]/,'');

        browserOsVersion = browserName + version;
    }

Tomado de https://github.com/leopic/jquery.detectBrowser.js/blob/sans-jquery/jquery.detectBrowser.sansjQuery.js

leópico
fuente
2

Prueba este ...

// Browser with version  Detection
navigator.sayswho= (function(){
    var N= navigator.appName, ua= navigator.userAgent, tem;
    var M= ua.match(/(opera|chrome|safari|firefox|msie)\/?\s*(\.?\d+(\.\d+)*)/i);
    if(M && (tem= ua.match(/version\/([\.\d]+)/i))!= null) M[2]= tem[1];
    M= M? [M[1], M[2]]: [N, navigator.appVersion,'-?'];
    return M;
})();

var browser_version          = navigator.sayswho;
alert("Welcome to " + browser_version);

mira el violín de trabajo ( aquí )

Hariharan GR
fuente
2

Para Firefox, Chrome, Opera, Internet Explorer y Safari

var ua="Mozilla/1.22 (compatible; MSIE 10.0; Windows 3.1)";
//ua = navigator.userAgent;
var b;
var browser;
if(ua.indexOf("Opera")!=-1) {

    b=browser="Opera";
}
if(ua.indexOf("Firefox")!=-1 && ua.indexOf("Opera")==-1) {
    b=browser="Firefox";
    // Opera may also contains Firefox
}
if(ua.indexOf("Chrome")!=-1) {
    b=browser="Chrome";
}
if(ua.indexOf("Safari")!=-1 && ua.indexOf("Chrome")==-1) {
    b=browser="Safari";
    // Chrome always contains Safari
}

if(ua.indexOf("MSIE")!=-1 && (ua.indexOf("Opera")==-1 && ua.indexOf("Trident")==-1)) {
    b="MSIE";
    browser="Internet Explorer";
    //user agent with MSIE and Opera or MSIE and Trident may exist.
}

if(ua.indexOf("Trident")!=-1) {
    b="Trident";
    browser="Internet Explorer";
}

// now for version


var version=ua.match(b+"[ /]+[0-9]+(.[0-9]+)*")[0];

console.log("broswer",browser);
console.log("version",version);
vusan
fuente
4
agregue esto a la consola en Chrome y obtuvo "Safari / 537.36"
Daniel_Madain
Esto fallará en Chrome y posiblemente en otros navegadores. Dado que la cadena UserAgent no es un recurso completamente confiable. Los proveedores de navegadores a menudo incluyen información engañosa.
Carlos Jimenez Bermudez
1

No pude hacer que algunas de las otras respuestas funcionen en Chrome, Firefox, IE11 y Edge con el mismo código. Se me ocurrió lo siguiente y parece funcionar para los navegadores enumerados anteriormente. También quería ver en qué sistema operativo estaba el usuario. No he probado esto en un navegador con la configuración de usuario-agente anulada por el usuario, por lo que el kilometraje puede variar. El orden de las FI es importante para que esto funcione correctamente.

let os, osStore, bStore, appVersion, browser;
// Chrome
if(navigator.vendor === "Google Inc."){
    appVersion = navigator.appVersion.split(" ");
    os = [appVersion[1],appVersion[2],appVersion[3],appVersion[4],appVersion[5]].join(" ");
    os = os.split("(")[1].split(")")[0]
    browser = appVersion[appVersion.length-2].split("/").join(" ");
    console.log("Browser:",browser,"- OS:",os);
}

// Safari
else if(navigator.vendor === "Apple Computer, Inc."){
    appVersion = navigator.appVersion.split(" ");
    os = [appVersion[1],appVersion[2],appVersion[3],appVersion[4],appVersion[5]].join(" ");
    os = os.split("(")[1].split(")")[0];
    browser = appVersion[appVersion.length-1].split("/").join(" ");
    console.log("Browser:",browser,"- OS:",os);
}

// Firefox is seems the only browser with oscpu
else if(navigator.oscpu){
    bStore = navigator.userAgent.split("; ").join("-").split(" ");
    browser = bStore[bStore.length-1].replace("/"," ");
    osStore = [bStore[1],bStore[2],bStore[3]].join(" ");
    osStore = osStore.split("-");
    osStore.pop(osStore.lastIndexOf)
    osStore = osStore.join(" ").split("(");
    os = osStore[1];
    console.log("Browser:",browser,"- OS:",os);
}

// IE is seems the only browser with cpuClass
// MSIE 11:10 Mode
else if(navigator.appName === "Microsoft Internet Explorer"){
    bStore = navigator.appVersion.split("; ");
    browser = bStore[1]+" / "+bStore[4].replace("/"," ");
    os = [bStore[2],bStore[3]].join(" ");
    console.log("Browser:",browser,"- OS:",os);
}

// MSIE 11
else if(navigator.cpuClass){
    bStore = navigator.appVersion.split("; ");
    osStore = [bStore[0],bStore[1]].join(" ");
    os = osStore.split("(")[1];
    browser = "MSIE 11 "+bStore[2].split("/").join(" ");
    console.log("Browser:",browser,"- OS:",os);
}

// Edge
else if(navigator.appVersion){
    browser = navigator.appVersion.split(" ");
    browser = browser[browser.length -1].split("/").join(" ");
    os = navigator.appVersion.split(")")[0].split("(")[1];
    console.log("Browser:",browser,"- OS:",os);
}

// Other browser
else {
    console.log(JSON.stringify(navigator));
}
D. Impresionante
fuente
0

Código para detectar el sistema operativo de un usuario

let os = navigator.userAgent.slice(13).split(';')
os = os[0]
console.log(os)
Windows NT 10.0
Saran Rts
fuente
0

Para obtener el nuevo Microsoft Edge basado en un núcleo de Mozilla, agregue:

else if ((verOffset=nAgt.indexOf("Edg"))!=-1) {
 browserName = "Microsoft Edge";
 fullVersion = nAgt.substring(verOffset+5);
}

antes de

// In Chrome, the true version is after "Chrome" 
else if ((verOffset=nAgt.indexOf("Chrome"))!=-1) {
 browserName = "Chrome";
 fullVersion = nAgt.substring(verOffset+7);
}
frablaser
fuente