JavaScript를 사용하여 브라우저 버전과 운영 체제를 감지하는 방법은 무엇입니까?

113

아래 코드를 사용해 보았지만 IE6에서 작동하지 않는 Chrome 및 Mozilla에서만 결과를 표시합니다. 

<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 파텔
추가 관련 답변에서 찾을 수 있습니다 이 와 이 '거의'속는
— 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 : OS 감지 .
OS 세부 정보를 감지하려면 JSFiddle을 참조하십시오 .

코드 스 니펫 표시

— hims056
소스
1
appVersion의 가능한 모든 값을 어디서 찾을 수 있는지 알고 있습니까? appVersion이 사용하는 가능한 모든 OS 값은 무엇입니까?
— John Odom
3
@JohnOdom 새로운 시스템 (예 : 곧 출시 될 Steam 상자)에는 아마도 고유 한 이름이있을 것입니다. 기존 시스템은 이름이나 속기를 변경할 수 있습니다. 정보를 얻기 위해 어떤 종류의 글로벌 데이터베이스를 사용하지 않는 한, 당신은 결코 최신 정보를 얻을 수 없습니다. 이것은 전적으로 독점이기 때문입니다. 언젠가 Google, W3 등은 크라우드 소싱을위한 API를 제공하고 사용자로부터 수집 한 모든 다른 시스템 이름과 관계를 공개적으로 사용할 수 있도록 할 것입니다.
— Domi 2015 년
1
verOffset = nAgt.indexOf ( "Opera"))! =-1. Opera 20 이상에서는 작동하지 않습니다.
— parth.hirpara
2
Edge를 감지 할 수 없습니다.
— Mohan Singh
1
이 자바 스크립트는 오래되었습니다. Edge 및 IE 11을 "Netscape 5"로보고합니다. 같은이 기능에 대한 유지 라이브러리를 사용하는 것이 좋습니다 github.com/faisalman/ua-parser-js
— 제임스 Boutcher에게
20

나는 슬프다. 우리는 이것에 대해 운이 좋지 않습니다.

WhereBrowser : Everybody lies 의 저자를 소개 하고 싶습니다 .

기본적으로 정직한 브라우저는 없습니다. Chrome 또는 IE를 사용하더라도 둘 다 Gecko 및 Safari를 지원하는 "Mozilla Netscape"임을 알려줍니다. 이 스레드에서 날아 다니는 바이올린을 직접 시도해보십시오.

hims056의 바이올린

하리하라의 바이올린

또는 기타 ... Chrome (아직 성공할 수 있음)으로 시도한 다음 최신 버전의 IE로 시도하면 울 것입니다. 물론 모든 문제를 해결하기위한 휴리스틱이 있지만 모든 엣지 케이스를 파악하는 것은 지루할 것이며 1 년 내에 더 이상 작동하지 않을 가능성이 큽니다.

예를 들어 코드를 가져 가십시오.

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

크롬 말한다 :

브라우저 코드 명 : Mozilla

브라우저 이름 : Netscape

브라우저 버전 : 5.0 (Windows NT 6.1; WOW64) AppleWebKit / 537.36 (KHTML, like Gecko) Chrome / 40.0.2214.115 Safari / 537.36

쿠키 사용 : true

플랫폼 : Win32

사용자 에이전트 헤더 : Mozilla / 5.0 (Windows NT 6.1; WOW64) AppleWebKit / 537.36 (Gecko와 같은 KHTML) 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처럼

쿠키 사용 : true

플랫폼 : Win32

사용자 에이전트 헤더 : 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 (또는 그들이 원하는 이름)가 나 오자마자 실패 할 가능성이 매우 높습니다.

— 도미
소스
2
Opera 브라우저 용 Chrome을 표시합니다.
— Rajkishor Sahu
이러한 속성 중 일부는 "역 호환성을 위해 유지"됩니다. 예를 들어 모든 브라우저는 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 년 5 월 작성, 마지막 커밋 '3 개월 전')
— Ideogram
12

JavaScript를 사용하여 운영 체제를 감지하려면 navigator.appVersion 대신 navigator.userAgent를 사용하는 것이 좋습니다. 

{
  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);
}
스 니펫 확장

— 니살 에듀
소스
1
찬성. 또한 정확히 왜 더 나은지 설명해 주시면 매우 도움이 될 것입니다. :) 또한 'UNIX / X11'이 놓친 것 같습니다.
— Systems Rebooter
@SystemsRebooter 다른 사람으로 추가 할 수있는 의견을 보내 주셔서 감사합니다.
— Nisal Edu
1
좋은 대답이 매우 도움이되었다
— 제레미 베이더
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 에서 가져옴

— 표범
소스
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
크롬에서 콘솔이를 추가하고 있어요 "사파리 / 537.36"
— Daniel_Madain
이것은 크롬 및 다른 브라우저에서 실패합니다. UserAgent 문자열은 완전히 신뢰할 수있는 리소스가 아니기 때문입니다. 브라우저 공급 업체는 종종 잘못된 정보를 포함합니다.
— Carlos Jimenez Bermudez
1

동일한 코드로 Chrome, Firefox, IE11 및 Edge에서 작동하는 다른 답변을 얻을 수 없었습니다. 나는 아래를 생각해 냈고 위에 나열된 브라우저에서 작동하는 것으로 보입니다. 또한 사용자가 어떤 OS를 사용하는지보고 싶었습니다. 사용자 재정의 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

사용자 의 운영 체제 를 감지하는 코드

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

Mozilla 코어를 기반으로하는 새로운 Microsoft Edge를 얻으려면 다음을 추가하십시오.

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.