JavaScript는 브라우저 유형 및 version_javascript 기술을 결정합니다.

며칠 전, 구글이 출시한 크롬 브라우저 브라우저 제품군에 어린 왕자가 태어났습니다. 크롬은 명문가에서 태어났기 때문에 아직 어리지만 감히 그를 멸시하는 사람은 없었습니다. 이제부터 우리는 브라우저의 '4가지 재능'을 '다섯 가지 황금꽃'으로 바꿔야 한다고 자주 말합니다.
웹사이트 프론트엔드 개발에 있어서 브라우저 호환성 문제는 이미 우리를 서두르게 만들었고, 크롬의 탄생은 우리에게 더 많은 고민을 안겨줄 것입니다. 브라우저 호환성은 프런트엔드 개발 프레임워크가 해결해야 할 첫 번째 문제입니다. 호환성 문제를 해결하려면 먼저 브라우저 유형과 버전을 정확하게 파악해야 합니다.
JavaScript는 프론트엔드 개발을 위한 주요 언어입니다. JavaScript 프로그램을 작성하여 브라우저의 유형과 버전을 결정할 수 있습니다. 일반적으로 JavaScript가 브라우저 유형을 결정하는 방법에는 두 가지가 있습니다. 하나는 다양한 브라우저의 고유 속성을 기반으로 하고, 다른 하나는 브라우저의 userAgent 속성을 분석하여 결정합니다. 많은 경우, 값에 따라 브라우저 유형을 결정한 후 호환성 문제를 처리하기 위해 브라우저 버전을 결정해야 하며, 브라우저 버전은 일반적으로 브라우저의 userAgent를 분석해야만 알 수 있습니다.
먼저 다양한 브라우저와 해당 userAgent의 특성을 분석해 보겠습니다.
IE
IE만이 ActiveX 컨트롤 생성을 지원하므로 다른 브라우저에는 없는 ActiveXObject 기능이 있습니다. 윈도우 객체에 ActiveXObject 함수가 존재한다고 판단되면 현재 브라우저가 IE라는 것을 명확하게 판단할 수 있습니다. 각 IE 버전의 일반적인 userAgent는 다음과 같습니다.

코드 복사 코드는 다음과 같습니다.

Mozilla/4.0(호환; MSIE 8.0; Windows NT 6.0)
Mozilla/4.0(호환; MSIE 7.0; Windows NT 5.2)
Mozilla/4.0(호환; MSIE 6.0; Windows NT 5.1)
Mozilla/4.0(호환; MSIE 5.0; Windows NT)

그 중 버전 번호는 MSIE 이후의 번호입니다.
파이어폭스
Firefox의 각 DOM 요소에는 DOM 요소의 위치와 크기를 얻는 데 사용되는 getBoxObjectFor 함수가 있습니다(IE의 해당 함수는 getBoundingClientRect 함수입니다). 이는 Firefox 특유의 특징으로 판단하면 현재 브라우저가 Firefox임을 알 수 있습니다. 여러 Firefox 버전의 userAgent는 대략 다음과 같습니다.

코드 복사 코드는 다음과 같습니다.

Mozilla/5.0(Windows; U; Windows NT 5.2) Gecko/2008070208 Firefox/3.0.1
Mozilla/5.0(Windows; U; Windows NT 5.1) Gecko/20070309 Firefox/2.0.0.3
Mozilla/5.0(Windows; U; Windows NT 5.1) Gecko/20070803 Firefox/1.5.0.12

그 중 버전번호는 Firefox 이후의 번호입니다.
오페라
Opera는 window.opera 속성인 특별한 브라우저 플래그를 제공합니다. Opera의 일반적인 userAgent는 다음과 같습니다.

코드 복사 코드는 다음과 같습니다.

Opera/9.27(Windows NT 5.2; U; zh-cn)
Opera/8.0(Macintosh; PPC Mac OS X; U; en)
Mozilla/5.0(Macintosh; PPC Mac OS X; U; en) Opera 8.0

그 중 버전번호는 오페라에 가까운 번호이다.
사파리
Safari 브라우저에는 다른 브라우저에는 없는 openDatabase 기능이 있는데, 이는 Safari를 판단하는 신호로 사용될 수 있습니다. 일반적인 Safari userAgent는 다음과 같습니다.

코드 복사 코드는 다음과 같습니다.

Mozilla/5.0(Windows; U; Windows NT 5.2) AppleWebKit/525.13(KHTML, like Gecko) 버전/3.1 Safari/525.13
Mozilla/5.0(iPhone, U, Mac OS X와 ​​같은 CPU) AppleWebKit/420.1(Gecko와 같은 KHTML) Version/3.0 Mobile/4A93 Safari/419.3

버전 번호는 버전 뒤의 번호입니다.
크롬
Chrome에는 MessageEvent 기능이 있지만 Firefox도 마찬가지입니다. 그러나 다행스럽게도 Chrome에는 Firefox의 getBoxObjectFor 기능이 없습니다. 이 조건에 따르면 Chrome 브라우저는 여전히 정확하게 판별될 수 있습니다. 현재 Chrome의 userAgent는 다음과 같습니다.
Mozilla/5.0(Windows; U; Windows NT 5.2) AppleWebKit/525.13(KHTML, like Gecko) Chrome/0.2.149.27 Safari/525.13
그 중 크롬의 버전번호는 그 뒤의 숫자일 뿐입니다.
흥미롭게도 Chrome의 userAgent에는 Safari 기능도 포함되어 있습니다. 아마도 이것이 Chrome이 모든 Apple 브라우저 애플리케이션을 실행하는 기반일 것입니다.
위의 정보를 이해하면 이러한 특성을 기반으로 브라우저 유형과 버전을 결정할 수 있습니다. 판단 결과를 Sys 네임스페이스에 저장하고 향후 프로그램이 읽을 수 있는 프런트엔드 프레임워크의 기본 플래그 정보가 됩니다. 브라우저가 결정되면 Sys 네임스페이스는 브라우저 이름의 속성을 가지며 해당 값은 브라우저의 버전 번호입니다. 예를 들어, IE 7.0이 결정되면 Sys.ie 값은 7.0이고, Firefox 3.0이 결정되면 Sys.firefox 값은 3.0입니다. 브라우저를 판별하는 코드는 다음과 같습니다.

<script type="text/javascript"> 
var Sys = {}; 
var ua = navigator.userAgent.toLowerCase(); 
if (window.ActiveXObject) 
Sys.ie = ua.match(/msie ([\d.]+)/)[1] 
else if (document.getBoxObjectFor) 
Sys.firefox = ua.match(/firefox\/([\d.]+)/)[1] 
else if (window.MessageEvent && !document.getBoxObjectFor) 
Sys.chrome = ua.match(/chrome\/([\d.]+)/)[1] 
else if (window.opera) 
Sys.opera = ua.match(/opera.([\d.]+)/)[1] 
else if (window.openDatabase) 
Sys.safari = ua.match(/version\/([\d.]+)/)[1]; 
//以下进行测试 
if(Sys.ie) document.write('IE: '+Sys.ie); 
if(Sys.firefox) document.write('Firefox: '+Sys.firefox); 
if(Sys.chrome) document.write('Chrome: '+Sys.chrome); 
if(Sys.opera) document.write('Opera: '+Sys.opera); 
if(Sys.safari) document.write('Safari: '+Sys.safari); 
</script> 

IE가 가장 많은 사용자를 보유하고 있기 때문에 우리는 IE를 먼저 판단하고 Firefox가 그 뒤를 따릅니다. 사용자 수에 따라 브라우저 유형을 결정하면 판단 효율성이 향상되고 낭비되는 노력을 줄일 수 있습니다. Chrome이 3위를 차지한 이유는 Chrome이 곧 시장 점유율 측면에서 세 번째 브라우저가 될 것이라고 예측하기 때문입니다. 그 중 브라우저 버전을 분석할 때 버전 정보를 추출하기 위해 정규식을 사용한다.
자바스크립트를 잘하신다면 이전 판단 코드를 다음과 같이 작성하셔도 됩니다.

<script type="text/javascript"> 
var Sys = {}; 
var ua = navigator.userAgent.toLowerCase(); 
window.ActiveXObject &#63; Sys.ie = ua.match(/msie ([\d.]+)/)[1] : 
document.getBoxObjectFor &#63; Sys.firefox = ua.match(/firefox\/([\d.]+)/)[1] : 
window.MessageEvent && !document.getBoxObjectFor &#63; Sys.chrome = ua.match(/chrome\/([\d.]+)/)[1] : 
window.opera &#63; Sys.opera = ua.match(/opera.([\d.]+)/)[1] : 
window.openDatabase &#63; Sys.safari = ua.match(/version\/([\d.]+)/)[1] : 0; 
//以下进行测试 
if(Sys.ie) document.write('IE: '+Sys.ie); 
if(Sys.firefox) document.write('Firefox: '+Sys.firefox); 
if(Sys.chrome) document.write('Chrome: '+Sys.chrome); 
if(Sys.opera) document.write('Opera: '+Sys.opera); 
if(Sys.safari) document.write('Safari: '+Sys.safari); 
</script> 

이렇게 하면 JavaScript 코드가 더욱 간소화될 수 있습니다. 물론 효율성을 중시하는지 유지보수성을 중시하는지에 따라 가독성이 약간 떨어집니다.
다양한 특성을 사용하여 브라우저를 확인하는 것이 정규식을 사용하여 userAgent를 분석하는 것보다 빠르지만 이러한 특성은 브라우저 버전에 따라 변경될 수 있습니다. 예를 들어, 브라우저의 고유한 기능이 시장에서 성공하면 다른 브라우저도 이에 따라 이 기능을 추가할 수 있으며, 이로 인해 해당 브라우저의 고유한 기능이 사라지고 당사의 판단이 실패하게 될 수 있습니다. 따라서 상대적으로 안전한 접근 방식은 userAgent의 특성을 분석하여 브라우저 유형을 결정하는 것입니다. 게다가 버전 정보를 판단하려면 브라우저의 userAgent를 구문 분석해야 합니다.
다양한 브라우저의 userAgent 정보를 분석하면 다양한 브라우저와 버전을 구별하는 정규식을 찾는 것이 어렵지 않습니다. 또한 브라우저 유형 및 버전 판단이 완전히 통합될 수 있습니다. 따라서 다음 코드를 작성할 수 있습니다.

<script type="text/javascript"> 
var Sys = {}; 
var ua = navigator.userAgent.toLowerCase(); 
var s; 
(s = ua.match(/msie ([\d.]+)/)) &#63; Sys.ie = s[1] : 
(s = ua.match(/firefox\/([\d.]+)/)) &#63; Sys.firefox = s[1] : 
(s = ua.match(/chrome\/([\d.]+)/)) &#63; Sys.chrome = s[1] : 
(s = ua.match(/opera.([\d.]+)/)) &#63; Sys.opera = s[1] : 
(s = ua.match(/version\/([\d.]+).*safari/)) &#63; Sys.safari = s[1] : 0; 
//以下进行测试 
if (Sys.ie) document.write('IE: ' + Sys.ie); 
if (Sys.firefox) document.write('Firefox: ' + Sys.firefox); 
if (Sys.chrome) document.write('Chrome: ' + Sys.chrome); 
if (Sys.opera) document.write('Opera: ' + Sys.opera); 
if (Sys.safari) document.write('Safari: ' + Sys.safari); 
</script> 

그 중 "...? ...: ..."와 같은 판단 표현을 사용하여 코드를 단순화했습니다. 판단 조건은 정규식 매칭을 완료하고 결과를 복사할 뿐만 아니라 직접적으로 조건 판단 역할을 하는 할당문이다. 후속 버전 정보는 이전 일치 결과에서만 추출하면 됩니다. 이는 매우 효율적인 코드입니다.
위의 코드는 모두 프론트엔드 프레임워크를 구축하기 위한 사전 조사이며, 5개 주요 브라우저에서 테스트되었습니다. 이제부터 특정 브라우저를 판단하려면 if(Sys.ie) 또는 if(Sys.firefox)만 사용하면 되고, if(Sys.ie == '8.0') 또는 if(Sys.firefox)만 사용하면 됩니다. firefox == '3.0') 및 기타 형식은 여전히 ​​매우 우아하게 표현됩니다.
프론트엔드 프레임워크 프로젝트가 시작되었습니다. 모든 것은 과정과 결과에 달려있습니다...
원본: Li Zhan (leadzen) Ali Software 2008-9-6 Hangzhou

모두가 더 재미있게 즐길 수 있도록 Script House 편집자가 몇 가지를 정리했습니다.

<script language="JavaScript"> 
function getOs() 
{ 
  var OsObject = ""; 
  if(navigator.userAgent.indexOf("MSIE")>0) { 
    return "MSIE"; //ie浏览器
  } 
  if(isChrome=navigator.userAgent.indexOf("Chrome")>0){ 
    return "chrome"; //Chrome浏览器
  } 
  if(isFirefox=navigator.userAgent.indexOf("Firefox")>0){ 
    return "Firefox"; //Firefox浏览器
  } 
  if(isOpera=navigator.userAgent.indexOf("Opera")>0) { 
    return "Opera"; //Opera浏览器
  } 
  if(isSafari=navigator.userAgent.indexOf("Safari")>0) { 
    return "Safari"; //Safari浏览器
  }  
  if(isCamino=navigator.userAgent.indexOf("Camino")>0){ 
    return "Camino"; //Camino浏览器
//……增加一些其它代码……
  } 
  if(isMozilla=navigator.userAgent.indexOf("Gecko/")>0){ 
    return "Gecko"; 
  } 
} 
alert(navigator.userAgent);
 alert("您的浏览器类型为:"+getOs()); 
</script>

비교적 완전한 판단 코드

<script type="text/javascript"> 
document.write('浏览器判別：');
var OsObject=navigator.userAgent;
// 包含「Opera」文字列 
if(OsObject.indexOf("Opera") != -1) 
{ 
   document.write('您的浏览器是Opera吧？'); 
} 
// 包含「MSIE」文字列 
else if(OsObject.indexOf("MSIE") != -1) 
{ 
   document.write('您的浏览器是Internet Explorer吧？'); 
} 
// 包含「chrome」文字列 ，不过360浏览器也照抄chrome的UA

else if(OsObject.indexOf("Chrome") != -1) 
{ 
  document.write('您的浏览器是chrome或360浏览器吧？'); 
}
// 包含「UCBrowser」文字列 
else if(OsObject.indexOf("UCBrowser") != -1) 
{ 
  document.write('您的浏览器是UCBrowser吧？'); 
}
// 包含「BIDUBrowser」文字列 
else if(OsObject.indexOf("BIDUBrowser") != -1) 
{ 
  document.write('您的浏览器是百度浏览器吧？'); 
}
// 包含「Firefox」文字列 
else if(OsObject.indexOf("Firefox") != -1) 
{ 
  document.write('您的浏览器是Firefox吧？'); 
}
// 包含「Netscape」文字列 
else if(OsObject.indexOf("Netscape") != -1)
{ 
  document.write('您的浏览器是Netscape吧？'); 
} 
// 包含「Safari」文字列 
else if(OsObject.indexOf("Safari") != -1) 
{ 
   document.write('您的浏览器是Safari 吧？'); 
} 
else{ 
　 document.write('无法识别的浏览器。'); 
} 
</script>