자바스크립트를 사용하여 브라우저 버전과 운영체제를 탐지하는 방법은?
아래 코드를 사용해 보았지만 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" 버전만 받으면 됩니다.
브라우저 세부 정보 탐지:
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 "OPR" or after "Version"
if ((verOffset=nAgt.indexOf("OPR"))!=-1) {
browserName = "Opera";
fullVersion = nAgt.substring(verOffset+4);
if ((verOffset=nAgt.indexOf("Version"))!=-1)
fullVersion = nAgt.substring(verOffset+8);
}
// In MS Edge, the true version is after "Edg" in userAgent
else if ((verOffset=nAgt.indexOf("Edg"))!=-1) {
browserName = "Microsoft Edge";
fullVersion = nAgt.substring(verOffset+4);
}
// 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>'
)소스 자바스크립트: 브라우저 이름.
브라우저 세부 정보를 탐지하려면 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);소스 자바스크립트: OS 탐지
OS Details를 탐지하려면 JSFiddle을 참조합니다.
갱신하다
Platform.js(여기서는 데모)에서 좋은 경험을 했지만 그래도 주의를 당부드립니다.
원본 게시물
Which Browser의 저자를 소개합니다.누구나 거짓말을 합니다.
기본적으로 어떤 브라우저도 정직하지 않습니다.Chrome이나 IE를 사용해도 Gecko와 Safari를 지원하는 "Mozilla Netscape"라고 알려줄 것입니다.이 실 안에서 날아다니는 바이올린에 직접 해보세요.
아니면 다른...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>
Chrome은 다음과 같이 말합니다.
브라우저 코드 이름: Mozilla
브라우저 이름:넷스케이프
브라우저 버전: 5.0 (Windows NT 6.1; WOW64) Apple WebKit/537.36 (KHTML, Gecko처럼) Chrome/40.0.2214.115 Safari/537.36
쿠키 사용: true
플랫폼:윈32
사용자 에이전트 헤더: Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, Gecko처럼) Chrome/40.0.2214.115 Safari/537.36
IE는 다음과 같이 말합니다.
브라우저 코드 이름: 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처럼
쿠키 사용: true
플랫폼:윈32
사용자 에이전트 헤더: Mozilla/5.0(윈도우즈 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(혹은 그들이 뭐라고 부르든)가 나오는 순간 실패할 가능성이 매우 높습니다.
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);
}이 목적을 위한 라이브러리가 있습니다. 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)'
@Jalpesh가 말했듯이 PPK의 대본은 이런 것들에 대한 권한입니다. 이것은 당신을 올바른 방향으로 가리킬 수 있습니다.
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 에서 가져온 자료
이거 먹어봐요.
// 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);
작동하는 바이올린을 확인합니다(여기)
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);
동일한 코드로 크롬, 파이어폭스, IE11, 엣지에서 작동할 수 있는 다른 답변들을 얻을 수 없었습니다.제가 아래를 생각해 냈는데 위에 나열된 브라우저에서 작동하는 것 같습니다.사용자가 어떤 OS에 있는지도 보고 싶었습니다.사용자가 User-Agent 설정을 무시한 브라우저에 대해 이를 테스트한 적이 없으므로 마일리지가 달라질 수 있습니다.IF가 올바르게 작동하려면 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));
}
이를 위해 3개의 도서관이 있습니다.온라인 https://www.whatsmyua.info 에서 이 페이지를 비교하고(이 페이지를 여러 브라우저 및 장치에 로드), 필요에 맞는 최적의 것을 선택할 수 있습니다.
- platform.js의 사용 예
<script src="platform.js"></script>
// on an iPad
platform.name; // 'Safari'
platform.version; // '5.1'
platform.product; // 'iPad'
platform.manufacturer; // 'Apple'
platform.layout; // 'WebKit'
platform.os; // 'iOS 5.0'
platform.description; // 'Safari 5.1 on Apple iPad (iOS 5.0)'
// or parsing a given UA string
var info = platform.parse('Mozilla/5.0 (Macintosh; Intel Mac OS X 10.7.2; en; rv:2.0) Gecko/20100101 Firefox/4.0 Opera 11.52');
info.name; // 'Opera'
info.version; // '11.52'
info.layout; // 'Presto'
info.os; // 'Mac OS X 10.7.2'
info.description; // 'Opera 11.52 (identifying as Firefox 4.0) on Mac OS X 10.7.2'
- ua-parser.js에 대한 사용 예
<script src="ua-parser.min.js"></script>
var parser = new UAParser();
console.log(parser.getResult());
/*
/// This will print an object structured like this:
{
ua: "",
browser: {
name: "",
version: "",
major: "" //@deprecated
},
engine: {
name: "",
version: ""
},
os: {
name: "",
version: ""
},
device: {
model: "",
type: "",
vendor: ""
},
cpu: {
architecture: ""
}
}
*/
// Default result depends on current window.navigator.userAgent value
// Now let's try a custom user-agent string as an example
var uastring1 = "Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/535.2 (KHTML, like Gecko) Ubuntu/11.10 Chromium/15.0.874.106 Chrome/15.0.874.106 Safari/535.2";
parser.setUA(uastring1);
var result = parser.getResult();
// You can also use UAParser constructor directly without having to create an instance:
// var result = UAParser(uastring1);
console.log(result.browser); // {name: "Chromium", version: "15.0.874.106"}
console.log(result.device); // {model: undefined, type: undefined, vendor: undefined}
console.log(result.os); // {name: "Ubuntu", version: "11.10"}
console.log(result.os.version); // "11.10"
console.log(result.engine.name); // "WebKit"
console.log(result.cpu.architecture); // "amd64"
2023:
navigator.platform그리고.navigator.appVersion사용되지 않습니다.navigator.userAgent크롬 버전 100-113 사이에 점차적으로 발생하는 정보를 덜 포함하도록 축소되고 있습니다.
현대적인 방법은 사용하는 것입니다.navigator.userAgentData, 매우 훌륭하고 선언적입니다.
자세한 내용은 이 Google 블로그를 참조하십시오.
하지만 파이어폭스와 사파리는 아직 이를 채택하지 않았기 때문에 이 답변은 미래지향적인 것임에 유의하시기 바랍니다.사용하기 전에 캐니를 꼭 확인하세요.
아이폰과 아이패드를 따로 다룰 2023년 코드가 필요했습니다.
navigator.platform이 더 이상 사용되지 않습니다.
늦은 밤 실험을 위해 야만적인 코드를 입력했을 뿐입니다.
iPhone & iPad 16.3, Android Phone, Windows 10으로 테스트되었습니다.
Android 태블릿이 없습니다.
Mac & Linux에서 테스트되지 않았습니다.
navigator.maxTouchPoints는 Chrome 시뮬레이터에서 작동하기 위해 더 크거나 같게 테스트되고 실제 장치에서 작동하기 위해 제거됩니다.
브라우저 이름과 버전에 관해서 요즘은 좀 까다롭네요, navigator. appVersion도 더 이상 사용되지 않습니다.
userAgent에는 많은 x.xx.xxx 매치가 있으며, 어쩌면 우리가 원하는 매치가 항상 마지막일 수도 있습니다.
아니거나, 내 Samsung S10 사용자 에이전트는 다음과 같습니다.
Mozilla/5.0 (Linux; Android 12; SM-G975F) Apple WebKit/537.36 (KHTML, Gecko처럼) Chrome/110.0.0.0 모바일 사파리/537.36
사파리를 사용하여 Chrome을 샌드박스하고 Android 장치에서 실행하는 Mozilla 코드를 실행하는 Linux 시스템입니까? omg
그래서 저는 선두의 "Mozilla/x.x"를 제거하고 오프셋을 도입하고 iOS 버전을 무시했습니다.
생산에 사용하지 마십시오.
어쨌든 코드는 어떤 기계에서 실행되는지에 의존해서는 안됩니다.
정말 즐거웠습니다.
(() => {
console.log(navigator.userAgent);
let ua = navigator.userAgent.toLowerCase().replace(/^mozilla\/\d\.\d\W/, "");
let mobiles = {
"iphone": /iphone/,
"ipad": /ipad|macintosh/,
"android": /android/
};
desktops = {
"windows": /win/,
"mac": /macintosh/,
"linux": /linux/
};
let os = Object.keys(mobiles)
.find(os => mobiles[os].test(ua) && navigator.maxTouchPoints >= 1)
||
Object.keys(desktops)
.find(os => desktops[os].test(ua));
let browserTest = ua.match(/(\w+)\/(\d+\.\d+(?:\.\d+)?(?:\.\d+)?)/g),
browserOffset = browserTest.length && (browserTest.length > 2 && !(/^(ver|cri|gec)/.test(browserTest[1])) ? 1 : 0),
browserResult = browserTest.length && browserTest[browserTest.length - 1 - browserOffset].split("/"),
browser = browserResult && browserResult[0],
version = browserResult && browserResult[1];
console.log(os, browser, version);
})();재미있는 사실:
- iPhone 12 mini iOs 16.3 userAgent가 iOs 16.1을 반환합니다.
- Android의 Firefox가 탐지됨
- iOS의 모든 브라우저가 Safari를 반환합니다.
- 완전 엉망진창입니다.
사용자의 운영체제를 탐지하기 위한 코드
let os = navigator.userAgent.slice(13).split(';')
os = os[0]
console.log(os)
Windows NT 10.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);
}
언급URL : https://stackoverflow.com/questions/11219582/how-to-detect-my-browser-version-and-operating-system-using-javascript
'itsource' 카테고리의 다른 글
| ASP에서 NuGet 패키지 위치는 어디입니까?NET Core? (0) | 2023.10.29 |
|---|---|
| Win32 API에서 Posix popen()에 해당하는 것은? (0) | 2023.10.29 |
| 최대 높이 설정을 해제하는 방법은? (0) | 2023.10.29 |
| HSQL 데이터베이스 사용자에게 권한이 없거나 개체를 찾을 수 없음 오류가 발생했습니다. (0) | 2023.10.29 |
| 그룹의 SQL 선택 멤버 (0) | 2023.10.29 |