Bagaimana cara mendeteksi versi browser dan sistem operasi saya menggunakan JavaScript?

113

Saya telah mencoba menggunakan kode di bawah ini tetapi hanya menampilkan hasil di Chrome dan Mozilla tidak berfungsi di 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>

Keluaran:

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

Saya hanya perlu mendapatkan versi "Firefox / 12.0".

javascript browser operating-system version capri
sumber
3
quirksmode.org/js/detect.html silakan periksa sekali ini dapat membantu Anda ..
Jalpesh Patel
Jawaban relevan tambahan dapat ditemukan tentang ini dan ini 'hampir' menipu
Matthijs Wessels
Periksa Jawaban saya dari tautan ini ( stackoverflow.com/questions/9847580/… )
Malki Mohamed

Jawaban:

167

Mendeteksi detail browser:

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

Sumber JavaScript: nama browser .
Lihat JSFiddle untuk mendeteksi Detail Browser .

Mendeteksi OS:

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

sumber JavaScript: Deteksi OS .
Lihat JSFiddle untuk mendeteksi Detail OS .

Tampilkan cuplikan kode

hims056
sumber
1
Apakah Anda tahu di mana saya bisa menemukan semua kemungkinan nilai appVersion? Nah, semua kemungkinan nilai OS yang digunakan appVersion?
John Odom
3
@JohnOdom Sistem baru, (mis. Steam box yang akan datang) mungkin memiliki nama sendiri; dan sistem yang ada mungkin mengubah nama atau singkatannya. Anda tidak akan pernah up-to-date, kecuali jika Anda menggunakan semacam database global untuk mendapatkan informasi itu; karena ini sepenuhnya merupakan hak milik. Mungkin suatu hari nanti, Google, W3, dll. Akan menawarkan API untuk melakukan crowdsource dan menyediakan untuk umum semua nama sistem yang berbeda dan hubungan mereka yang mereka kumpulkan dari pengguna mereka.
Domi
1
verOffset = nAgt.indexOf ("Opera"))! = - 1. Ini tidak akan berfungsi untuk Opera 20 ke atas.
parth.hirpara
2
Tidak dapat mendeteksi Edge.
Mohan Singh
1
Javascript ini sudah usang. Laporan Edge dan IE 11 sebagai "Netscape 5". Sarankan menggunakan perpustakaan yang dikelola untuk fungsi ini seperti github.com/faisalman/ua-parser-js
James Boutcher
20

Saya sedih untuk mengatakan: Kami benar-benar kurang beruntung untuk yang satu ini.

Saya ingin merujuk Anda ke penulis YangBrowser : Semua orang berbohong .

Pada dasarnya, tidak ada browser yang jujur. Tidak masalah jika Anda menggunakan Chrome atau IE, keduanya akan memberi tahu Anda bahwa mereka adalah "Mozilla Netscape" dengan dukungan Gecko dan Safari. Cobalah sendiri pada salah satu biola yang beterbangan di utas ini:

biola hims056

Biola Hariharan

atau yang lainnya ... Cobalah dengan Chrome (yang mungkin masih berhasil), kemudian coba dengan versi IE terbaru, dan Anda akan menangis. Tentu saja, ada heuristik, untuk mendapatkan semuanya dengan benar, tetapi akan membosankan untuk memahami semua kasus edge, dan kemungkinan besar tidak akan berfungsi lagi dalam waktu satu tahun.

Ambil kode Anda, misalnya:

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

Nama Kode Browser: Mozilla

Nama Browser: Netscape

Versi Browser: 5.0 (Windows NT 6.1; WOW64) AppleWebKit / 537.36 (KHTML, seperti Gecko) Chrome / 40.0.2214.115 Safari / 537.36

Cookie Diaktifkan: benar

Platform: Win32

Header agen pengguna: Mozilla / 5.0 (Windows NT 6.1; WOW64) AppleWebKit / 537.36 (KHTML, seperti Gecko) Chrome / 40.0.2214.115 Safari / 537.36

IE mengatakan:

Nama Kode Browser: Mozilla

Nama Browser: Netscape

Versi Browser: 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) seperti Gecko

Cookie Diaktifkan: benar

Platform: Win32

Header agen pengguna: 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) seperti Gecko

Setidaknya Chrome masih memiliki string yang berisi "Chrome" dengan nomor versi persisnya. Tetapi, untuk IE Anda harus mengekstrapolasi dari hal-hal yang didukungnya untuk benar-benar mengetahuinya (siapa lagi yang akan menyombongkan diri bahwa mereka mendukung .NETatau Media Center: P), dan kemudian mencocokkannya rv:di bagian paling akhir untuk mendapatkan nomor versi. Tentu saja, bahkan heuristik canggih seperti itu kemungkinan besar akan gagal segera setelah IE 12 (atau apa pun yang mereka ingin menyebutnya) keluar.

Domi
sumber
2
Ini menampilkan browser Chrome untuk Opera.
Rajkishor Sahu
beberapa properti tersebut "disimpan untuk kompatibilitas mundur", misalnya semua browser akan mengembalikan "Netscape" untuk navigator.appName→ developer.mozilla.org/en-US/docs/Web/API/NavigatorID
Philipp
18

Ada perpustakaan untuk tujuan ini: https://github.com/bestiejs/platform.js#readme

Kemudian Anda bisa menggunakannya dengan cara ini

// 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
sumber
1
Perhatikan bahwa dari semua tautan ke github-libraries dalam jawaban di sini, perpustakaan ini tampaknya yang paling mutakhir (Menulis pada Mei 2018, dengan komit terakhir '3 bulan yang lalu')
Ideogram
12

Untuk mendeteksi sistem operasi menggunakan JavaScript, lebih baik menggunakan navigator.userAgent daripada 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);
}
Luaskan cuplikan

Nisal Edu
sumber
1
Upvoting. Juga, akan sangat membantu jika Anda dapat menjelaskan mengapa tepatnya lebih baik :) Juga, sepertinya 'UNIX / X11' tidak terjawab.
Sistem Rebooter
@SystemsRebooter Terima kasih atas komentarnya, Anda dapat menambahkannya sebagai orang lain.
Nisal Edu
1
jawaban yang bagus, ini sangat membantu
Jeremy Bader
9

Naskah PPK adalah otoritas untuk hal semacam ini, seperti yang dikatakan @Jalpesh, ini mungkin mengarahkan Anda ke jalan yang benar

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

Diambil dari https://github.com/leopic/jquery.detectBrowser.js/blob/sans-jquery/jquery.detectBrowser.sansjQuery.js

leopic
sumber
2

Coba yang ini..

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

lihat biola yang berfungsi (di sini )

Hariharan GR
sumber
2

Untuk Firefox, Chrome, Opera, Internet Explorer dan 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
sumber
4
menambahkan ini ke konsol di krom dan mendapat "Safari / 537,36"
Daniel_Madain
Ini akan gagal di chrome dan mungkin di browser lain. Karena string UserAgent bukanlah sumber daya yang sepenuhnya dapat diandalkan. Vendor browser sering kali menyertakan informasi yang menyesatkan di dalamnya.
Carlos Jimenez Bermudez
1

Saya tidak bisa mendapatkan beberapa jawaban lain untuk bekerja di Chrome, Firefox, IE11, dan Edge dengan kode yang sama. Saya datang dengan di bawah ini dan tampaknya berfungsi untuk browser yang tercantum di atas. Saya juga ingin melihat OS apa yang digunakan pengguna. Saya belum menguji ini pada browser dengan pengaturan User-Agent yang diganti oleh pengguna, jadi jarak tempuh dapat bervariasi. Urutan IF penting agar ini berfungsi dengan benar.

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. Mengagumkan
sumber
0

Kode untuk mendeteksi sistem operasi pengguna

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

Untuk mendapatkan Microsoft Edge baru berdasarkan inti Mozilla tambahkan:

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

sebelum

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