Comment détecter la version de mon navigateur et mon système d'exploitation à l'aide de JavaScript?

113

J'ai essayé d'utiliser le code ci-dessous, mais il n'affiche que les résultats de Chrome et Mozilla ne fonctionne pas dans 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>

Production:

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

Je n'ai besoin que de la version "Firefox / 12.0".

corsaire
la source
3
quirksmode.org/js/detect.html s'il vous plaît vérifier une fois que cela peut vous aider ..
Jalpesh Patel
Des réponses pertinentes supplémentaires peuvent être trouvées sur ceci et cela dupes `` presque ''
Matthijs Wessels
Vérifiez ma réponse à partir de ce lien ( stackoverflow.com/questions/9847580/… )
Malki Mohamed

Réponses:

167

Détection des détails du navigateur:

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>'
)

JavaScript source : nom du navigateur .
Voir JSFiddle pour détecter les détails du navigateur .

Détection du système d'exploitation:

// 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);

JavaScript source : détection du système d'exploitation .
Voir JSFiddle pour détecter les détails du système d'exploitation .

hims056
la source
1
Savez-vous où je pourrais trouver toutes les valeurs possibles de appVersion? Eh bien, toutes les valeurs de système d'exploitation possibles utilisées par appVersion?
John Odom
3
@JohnOdom Les nouveaux systèmes, (par exemple la prochaine boîte Steam) ont probablement leurs propres noms; et les systèmes existants peuvent changer leurs noms ou leurs raccourcis. Vous ne serez jamais à jour, sauf si vous utilisez une sorte de base de données globale pour obtenir ces informations; puisque c'est entièrement propriétaire. Peut-être qu'un jour, Google, W3, etc. offriront une API pour le crowdsourcing et rendront publics tous les différents noms de systèmes et leurs relations qu'ils recueillent auprès de leurs utilisateurs.
Domi
1
verOffset = nAgt.indexOf ("Opera"))! = - 1. Cela ne fonctionnera pas pour Opera 20 et supérieur.
parth.hirpara
2
Impossible de détecter Edge.
Mohan Singh le
1
Ce Javascript est obsolète. Signale Edge et IE 11 comme «Netscape 5». Suggérer d'utiliser une bibliothèque maintenue pour cette fonctionnalité comme github.com/faisalman/ua-parser-js
James Boutcher
20

Je suis triste de dire: nous n'avons pas de chance sur celui-ci.

Je voudrais vous référer à l'auteur de WhichBrowser : Tout le monde ment .

Fondamentalement, aucun navigateur n'est honnête. Peu importe si vous utilisez Chrome ou IE, ils vous diront tous les deux qu'il s'agit de "Mozilla Netscape" avec le support de Gecko et Safari. Essayez-le vous-même sur l'un des violons volant dans ce fil:

violon de hims056

Le violon d'Hariharan

ou tout autre ... Essayez-le avec Chrome (qui pourrait encore réussir), puis essayez-le avec une version récente d'IE, et vous pleurerez. Bien sûr, il existe des heuristiques, pour bien faire les choses, mais il sera fastidieux de saisir tous les cas extrêmes, et ils ne fonctionneront probablement plus dans un an.

Prenez votre code, par exemple:

<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 dit:

Nom de code du navigateur: Mozilla

Nom du navigateur: Netscape

Version du navigateur: 5.0 (Windows NT 6.1; WOW64) AppleWebKit / 537.36 (KHTML, comme Gecko) Chrome / 40.0.2214.115 Safari / 537.36

Cookies activés: vrai

Plateforme: Win32

En-tête de l'agent utilisateur: Mozilla / 5.0 (Windows NT 6.1; WOW64) AppleWebKit / 537.36 (KHTML, comme Gecko) Chrome / 40.0.2214.115 Safari / 537.36

IE dit:

Nom de code du navigateur: Mozilla

Nom du navigateur: Netscape

Version du navigateur: 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) comme Gecko

Cookies activés: vrai

Plateforme: Win32

En-tête de l'agent utilisateur: 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) comme Gecko

Au moins Chrome a toujours une chaîne qui contient "Chrome" avec le numéro de version exact. Mais, pour IE, vous devez extrapoler à partir des éléments qu'il prend en charge pour le comprendre (qui d'autre se vanterait de soutenir .NETou Media Center: P), puis le comparer rv:à la toute fin pour obtenir le numéro de version. Bien sûr, même ces heuristiques sophistiquées pourraient très probablement échouer dès que IE 12 (ou peu importe comment ils veulent l'appeler) sortira.

Domi
la source
2
Son affichage Chrome pour le navigateur Opera.
Rajkishor Sahu
certaines de ces propriétés sont "conservées pour compatibilité descendante", par exemple tous les navigateurs navigator.appName
Philipp
18

Il existe une bibliothèque à cet effet: https://github.com/bestiejs/platform.js#readme

Ensuite, vous pouvez l'utiliser de cette façon

// 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
la source
1
Notez que de tous les liens vers les bibliothèques github dans les réponses ici, cette bibliothèque semble être la plus à jour (écriture en mai 2018, avec le dernier commit `` il y a 3 mois '')
Idéogramme
13

Pour détecter le système d'exploitation à l'aide de JavaScript, il est préférable d'utiliser navigator.userAgent au lieu 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);
}

Nisal Edu
la source
1
Vote positif. En outre, il serait très utile si vous pouviez expliquer pourquoi exactement c'est mieux :) Aussi, il semble que «UNIX / X11» a manqué.
Systems Rebooter
@SystemsRebooter Merci pour le commentaire, vous pouvez les ajouter comme d'autres.
Nisal Edu
1
excellente réponse, cela a été très utile
Jeremy Bader
9

Le script de PPK est l'autorité pour ce genre de choses, comme @Jalpesh l'a dit, cela pourrait vous indiquer la bonne voie

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

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

léopique
la source
2

Essaye celui-là..

// 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);

Découvrez le violon de travail ( ici )

Hariharan GR
la source
2

Pour Firefox, Chrome, Opera, Internet Explorer et 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
la source
4
ajoutez ceci à la console en chrome et obtenez "Safari / 537.36"
Daniel_Madain
Cela échouera dans Chrome et éventuellement dans d'autres navigateurs. Étant donné que la chaîne UserAgent n'est pas une ressource entièrement fiable. Les fournisseurs de navigateurs contiennent souvent des informations trompeuses.
Carlos Jimenez Bermudez
1

Je n'ai pas réussi à faire fonctionner certaines des autres réponses sur Chrome, Firefox, IE11 et Edge avec le même code. Je suis venu avec le ci-dessous et il semble fonctionner pour les navigateurs énumérés ci-dessus. Je voulais aussi voir sur quel système d'exploitation l'utilisateur était. Je n'ai pas testé cela avec un navigateur avec des paramètres User-Agent remplacés par l'utilisateur, le kilométrage peut donc varier. L'ordre des FI est important pour que cela fonctionne correctement.

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. Génial
la source
0

Code pour détecter le système d'exploitation d'un utilisateur

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

Pour obtenir le nouveau Microsoft Edge basé sur un noyau Mozilla, ajoutez:

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

avant

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