세상에 브라우저가 몇 개나 있는지 아시나요? 잘 알려진 4가지 브라우저인 IE, Firefox, Opera 및 Safari 외에도 전 세계에는 거의 100가지에 가까운 브라우저가 있습니다.
브라우저 호환성은 프론트엔드 개발 프레임워크가 해결해야 할 첫 번째 문제입니다. 호환성 문제를 해결하려면 먼저 브라우저 유형과 버전을 정확하게 파악해야 합니다.
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
Firefox의 DOM 요소에는 DOM 요소의 위치와 크기를 가져오는 데 사용되는 getBoxObjectFor 함수가 있습니다(IE의 해당 함수는 getBoundingClientRect 함수입니다). 이는 Firefox 특유의 특징으로 판단하면 현재 브라우저가 Firefox임을 알 수 있습니다. 여러 Firefox 버전의 userAgents는 대략 다음과 같습니다.
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
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
그 중 버전 번호는 Opera에 가까운 숫자입니다.
Safari
Safari 브라우저에는 다른 브라우저에는 없는 openDatabase 기능이 있는데, 이는 Safari를 판단하는 신호로 사용할 수 있습니다. Safari용 일반적인 userAgent는 다음과 같습니다.
Mozilla/5.0(Windows; U; Windows NT 5.2) AppleWebKit/525.13(KHTML, like Gecko) Version/3.1 Safari/525.13
Mozilla/ 5.0(iPhone; U; Mac OS X와 같은 CPU) AppleWebKit/420.1(KHTML, like Gecko) Version/3.0 Mobile/4A93 Safari/419.3
버전 번호는 버전 이후의 번호입니다.
Chrome
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의 버전 번호는 그 뒤에 오는 숫자입니다.
흥미롭게도 Chrome의 userAgent에는 Safari 기능도 포함되어 있습니다. 아마도 이것이 Chrome이 모든 Apple 브라우저 애플리케이션을 실행하는 기반일 것입니다.
위 정보를 이해하면 이러한 특성을 바탕으로 브라우저 유형과 버전을 판단할 수 있습니다. 판단 결과를 Sys 네임스페이스에 저장하고 향후 프로그램이 읽을 수 있는 프런트엔드 프레임워크의 기본 플래그 정보가 됩니다. 브라우저가 결정되면 Sys 네임스페이스는 브라우저 이름의 속성을 가지며 해당 값은 브라우저의 버전 번호입니다. 예를 들어, IE 7.0이 결정되면 Sys.ie 값은 7.0이고, Firefox 3.0이 결정되면 Sys.firefox 값은 3.0입니다. 다음은 브라우저를 결정하는 코드입니다:
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);
IE를 가장 먼저 판단하는 이유는 IE가 사용자가 가장 많고 그 다음이 Firefox이기 때문입니다. 사용자 수에 따라 브라우저 유형을 결정하면 판단 효율성이 향상되고 낭비되는 노력을 줄일 수 있습니다. Chrome이 3위를 차지한 이유는 Chrome이 곧 시장 점유율 측면에서 세 번째 브라우저가 될 것이라고 예측하기 때문입니다. 그 중 브라우저 버전을 분석할 때 버전 정보를 추출하기 위해 정규식을 사용한다.
JavaScript를 잘한다면 이전 판단 코드를 다음과 같이 작성할 수도 있습니다.
var Sys = {};
var ua = navigator.userAgent.toLowerCase();
window.ActiveXObject ? Sys.ie = ua.match(/msie ([d.]+)/)[1] :
문서. getBoxObjectFor ? Sys.firefox = ua.match(/firefox/([d.]+)/)[1] :
window.MessageEvent && !document.getBoxObjectFor Sys.chrome = ua.match (/ chrome/([d.]+)/)[1] :
window.opera ? Sys.opera = ua.match(/opera.([d.]+)/)[1] :
window.openDatabase ? 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);
이것은 JavaScript 코드를 더욱 간소화할 수 있습니다. 물론 효율성을 중시하는지 유지보수성을 중시하는지에 따라 가독성이 약간 떨어집니다.
다른 특성을 사용하여 브라우저를 결정합니다. 정규식을 사용하여 userAgent를 분석하는 것보다 빠르지만 이러한 특성은 브라우저 버전에 따라 변경될 수 있습니다. 예를 들어, 브라우저의 고유한 기능이 시장에서 성공하면 다른 브라우저도 이에 따라 이 기능을 추가할 수 있으며, 이로 인해 해당 브라우저의 고유한 기능이 사라지고 당사의 판단이 실패하게 될 수 있습니다. 따라서 상대적으로 안전한 접근 방식은 userAgent의 특성을 분석하여 브라우저 유형을 결정하는 것입니다. 게다가 버전 정보를 판단하려면 어쨌든 브라우저의 userAgent를 구문 분석해야 합니다.
다양한 브라우저의 userAgent 정보를 분석하면 다양한 브라우저와 버전을 구별하는 정규식을 찾는 것이 어렵지 않습니다. 또한 브라우저 유형 및 버전 판단이 완전히 통합될 수 있습니다. 따라서 다음 코드를 작성할 수 있습니다.
var Sys = {};
var ua = navigator.userAgent.toLowerCase();
var s;
(s = ua.match(/msie ([d.]+)/)) ? Sys.ie = s[1] :
(s = ua.match (/firefox/([d.]+)/)) ? Sys.firefox = s[1] :
(s = ua.match(/chrome/([d.]+)/) ) ? Sys.chrome = s[1] :
(s = ua.match(/opera.([d.]+)/)) ? Sys.opera = s[1] :
(s = ua.match(/version/([d.]+).*safari/)) ? 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);
그 중 "... ? ... : ..."와 같은 판단 표현을 사용하여 코드를 단순화하였습니다. 판단 조건은 정규식 매칭을 완료하고 결과를 복사할 뿐만 아니라 직접적으로 조건 판단 역할도 하는 할당문이다. 후속 버전 정보는 이전 일치 결과에서만 추출하면 됩니다. 이는 매우 효율적인 코드입니다.
위 코드는 모두 프론트엔드 프레임워크 구축을 위한 사전 연구이며, 주요 5개 브라우저에서 테스트되었습니다. 이제부터 특정 브라우저를 판단하려면 if(Sys.ie)나 if(Sys.firefox)만 사용하면 되고, if(Sys.ie == '8.0′)이나 if(Sys.firefox)만 사용하면 됩니다. firefox == '3.0') 및 기타 형식은 여전히 매우 우아하게 표현됩니다.
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
