จะตรวจหาเวอร์ชันเบราว์เซอร์และระบบปฏิบัติการของฉันโดยใช้ JavaScript ได้อย่างไร?

113

ฉันได้ลองใช้โค้ดด้านล่าง แต่แสดงผลเฉพาะใน Chrome และ Mozilla ไม่ทำงานใน 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>

เอาท์พุต:

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

ฉันต้องใช้เวอร์ชัน "Firefox / 12.0" เท่านั้น

javascript  browser  operating-system  version 
— คาปรี
แหล่งที่มา
3
quirksmode.org/js/detect.htmlโปรดตรวจสอบครั้งนี้อาจช่วยคุณได้ ..
— Jalpesh Patel
คำตอบที่เกี่ยวข้องเพิ่มเติมสามารถพบได้ในสิ่งนี้และสิ่งนี้ 'เกือบ' dupes
— Matthijs Wessels
ตรวจสอบคำตอบของฉันจากลิงค์นี้ ( stackoverflow.com/questions/9847580/… )
— Malki Mohamed

คำตอบ:

167

การตรวจจับรายละเอียดของเบราว์เซอร์:

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: ชื่อเบราว์เซอร์
ดู JSFiddle ในการตรวจสอบรายละเอียดเบราว์เซอร์

การตรวจจับ 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);

แหล่งที่มาของJavaScript: การตรวจสอบระบบปฏิบัติการ
ดู JSFiddle ในการตรวจสอบรายละเอียดของระบบปฏิบัติการ

แสดงข้อมูลโค้ด

— เขา 056
แหล่งที่มา
1
คุณรู้ไหมว่าฉันจะหาค่าที่เป็นไปได้ทั้งหมดของ appVersion ได้ที่ไหน? ค่า OS ที่เป็นไปได้ทั้งหมดที่ appVersion ใช้?
— John Odom
3
@JohnOdom ระบบใหม่ (เช่นกล่อง Steam ที่กำลังจะมาถึง) อาจมีชื่อของตัวเอง และระบบที่มีอยู่อาจเปลี่ยนชื่อหรือ shorthands คุณจะไม่มีวันเป็นปัจจุบันเว้นแต่คุณจะใช้ฐานข้อมูลส่วนกลางบางประเภทเพื่อรับข้อมูลดังกล่าว เนื่องจากเป็นกรรมสิทธิ์ทั้งหมด บางทีสักวัน Google, W3 และอื่น ๆ จะเสนอ API เพื่อรวบรวมข้อมูลและเผยแพร่ชื่อระบบที่แตกต่างกันทั้งหมดและความสัมพันธ์ที่พวกเขารวบรวมจากผู้ใช้
— Domi
1
verOffset = nAgt.indexOf ("Opera"))! = - 1. ใช้ไม่ได้กับ Opera 20 ขึ้นไป
— parth.hirpara
2
ไม่สามารถตรวจพบ Edge
— Mohan Singh
1
Javascript นี้ล้าสมัย รายงาน Edge และ IE 11 เป็น "Netscape 5" แนะนำให้ใช้ไลบรารีที่ดูแลสำหรับฟังก์ชันนี้เช่นgithub.com/faisalman/ua-parser-js
— James Boutcher
21

ฉันเสียใจที่จะบอกว่าเราโชคไม่ดีกับเรื่องนี้

ฉันต้องการแนะนำคุณให้รู้จักกับผู้เขียนWhichBrowser : ทุกคนโกหกทุกคนโกหก

โดยพื้นฐานแล้วไม่มีเบราว์เซอร์ใดที่ซื่อสัตย์ ไม่ว่าคุณจะใช้ Chrome หรือ IE ทั้งคู่จะบอกคุณว่าเป็น "Mozilla Netscape" พร้อมการสนับสนุน Gecko และ Safari ลองด้วยตัวคุณเองกับ fiddles ที่บินไปมาในหัวข้อนี้:

ซอของ hims056

ซอของ Hariharan

หรืออื่น ๆ ... ลองใช้ Chrome (ซึ่งอาจยังประสบความสำเร็จ) จากนั้นลองใช้กับ IE เวอร์ชันล่าสุดแล้วคุณจะร้องอ๋อ แน่นอนว่ามีฮิวริสติกส์เพื่อให้เข้าใจถูกต้อง แต่มันจะน่าเบื่อที่จะเข้าใจทุกกรณีและพวกเขาจะไม่ทำงานอีกต่อไปในเวลาหนึ่งปี

ใช้รหัสของคุณตัวอย่างเช่น:

<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 พูดว่า:

ชื่อรหัสเบราว์เซอร์: Mozilla

ชื่อเบราว์เซอร์: Netscape

เวอร์ชันเบราว์เซอร์: 5.0 (Windows NT 6.1; WOW64) AppleWebKit / 537.36 (KHTML เช่น Gecko) Chrome / 40.0.2214.115 Safari / 537.36

เปิดใช้งานคุกกี้: จริง

แพลตฟอร์ม: Win32.2

User-agent header: Mozilla / 5.0 (Windows NT 6.1; WOW64) AppleWebKit / 537.36 (KHTML เช่น Gecko) Chrome / 40.0.2214.115 Safari / 537.36

IE พูดว่า:

ชื่อรหัสเบราว์เซอร์: Mozilla

ชื่อเบราว์เซอร์: Netscape

เวอร์ชันเบราว์เซอร์: 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) เช่น Gecko

เปิดใช้งานคุกกี้: จริง

แพลตฟอร์ม: Win32.2

User-agent header: 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) เช่น Gecko

อย่างน้อย Chrome ก็ยังมีสตริงที่มี "Chrome" พร้อมหมายเลขเวอร์ชันที่แน่นอน แต่สำหรับ IE คุณต้องคาดคะเนจากสิ่งที่รองรับเพื่อที่จะคิดออกได้จริง (ใครจะโม้ว่ารองรับ.NETหรือMedia Center: P) จากนั้นจับคู่กับrv:ท้ายสุดเพื่อรับหมายเลขเวอร์ชัน แน่นอนว่าแม้แต่การวิเคราะห์ฮิวริสติกที่ซับซ้อนเช่นนี้ก็อาจล้มเหลวได้ทันทีที่ IE 12 (หรืออะไรก็ตามที่พวกเขาต้องการเรียกมัน) ออกมา

— Domi
แหล่งที่มา
2
แสดง Chrome สำหรับเบราว์เซอร์ Opera
— Rajkishor Sahu
คุณสมบัติเหล่านี้บางส่วน "เก็บไว้เพื่อความเข้ากันได้แบบย้อนหลัง" เช่นเบราว์เซอร์ทั้งหมดจะส่งคืน "Netscape" สำหรับnavigator.appName→ developer.mozilla.org/en-US/docs/Web/API/NavigatorID
— Philipp
18

มีห้องสมุดสำหรับวัตถุประสงค์นี้: https://github.com/bestiejs/platform.js#readme

จากนั้นคุณสามารถใช้วิธีนี้

// 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
แหล่งที่มา
1
โปรดทราบว่าจากลิงก์ทั้งหมดไปยัง github-libraries ในคำตอบที่นี่ไลบรารีนี้ดูเหมือนจะเป็นข้อมูลล่าสุด (เขียนเมื่อเดือนพฤษภาคม 2018 โดยมีการกระทำล่าสุด '3 เดือนที่แล้ว')
— Ideogram
13

ในการตรวจจับระบบปฏิบัติการโดยใช้ JavaScript ควรใช้ navigator.userAgent แทน 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
แหล่งที่มา
1
การโหวตขึ้น นอกจากนี้มันจะมีประโยชน์มากถ้าคุณสามารถอธิบายได้ว่าทำไมมันดีกว่า :) นอกจากนี้ดูเหมือนว่าพลาด 'UNIX / X11'
— Systems Rebooter
@SystemsRebooter ขอบคุณสำหรับความคิดเห็นที่คุณสามารถเพิ่มสิ่งเหล่านั้นเป็นคนอื่น ๆ
— Nisal Edu
1
คำตอบที่ดีนี่มีประโยชน์มาก
— Jeremy Bader
9

สคริปต์ของ PPK เป็นผู้มีอำนาจในเรื่องประเภทนี้ดังที่ @Jalpesh กล่าวสิ่งนี้อาจชี้ให้คุณไปในทางที่ถูกต้อง

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

นำมาจากhttps://github.com/leopic/jquery.detectBrowser.js/blob/sans-jquery/jquery.detectBrowser.sansjQuery.js

— leopic
แหล่งที่มา
2

ลองอันนี้..

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

ตรวจสอบการทำงานของซอ ( ที่นี่ )

— ฮาริฮารัน GR
แหล่งที่มา
2

สำหรับ Firefox, Chrome, Opera, Internet Explorer และ 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);
— วูซาน
แหล่งที่มา
4
เพิ่มสิ่งนี้ลงในคอนโซลใน chrome และรับ "Safari / 537.36"
— Daniel_Madain
สิ่งนี้จะล้มเหลวใน Chrome และอาจเกิดขึ้นในเบราว์เซอร์อื่น เนื่องจากสตริง UserAgent ไม่ใช่ทรัพยากรที่เชื่อถือได้อย่างสมบูรณ์ ผู้จำหน่ายเบราว์เซอร์มักรวมข้อมูลที่ทำให้เข้าใจผิดไว้ในนั้น
— Carlos Jimenez Bermudez
1

ฉันไม่สามารถหาคำตอบอื่น ๆ เพื่อใช้งานบน Chrome, Firefox, IE11 และ Edge ด้วยรหัสเดียวกันได้ ฉันมาพร้อมกับด้านล่างและดูเหมือนว่าจะใช้ได้กับเบราว์เซอร์ที่ระบุไว้ข้างต้น ฉันยังต้องการดูว่าผู้ใช้ใช้ระบบปฏิบัติการอะไร ฉันยังไม่ได้ทดสอบสิ่งนี้กับเบราว์เซอร์ที่มีการตั้งค่า User-Agent ที่แทนที่ผู้ใช้ดังนั้นระยะทางอาจแตกต่างกันไป ลำดับของ IF เป็นสิ่งสำคัญสำหรับการทำงานอย่างถูกต้อง

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. น่ากลัว
แหล่งที่มา
0

ในการรับ Microsoft Edge ใหม่โดยใช้ Mozilla core add:

else if ((verOffset=nAgt.indexOf("Edg"))!=-1) {
 browserName = "Microsoft Edge";
 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);
}
— frablaser
แหล่งที่มา
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.