웹 사이트 프론트 엔드 개발에서 브라우저 호환성 문제로 인해 이미 우리를 서두르고 있었으며, 우리가 얼마나 많은 어려움을 겪게 될지 모르겠습니다. 브라우저 호환성은 프론트 엔드 개발 프레임 워크가 해결 해야하는 첫 번째 문제입니다. 호환성 문제를 해결하려면 먼저 브라우저의 유형과 버전을 정확하게 결정해야합니다.
JavaScript는 프론트 엔드 개발의 주요 언어입니다. JavaScript 프로그램을 작성하여 브라우저의 유형과 버전을 판단 할 수 있습니다. JavaScript에서 브라우저 유형을 판단하는 두 가지 방법이 있습니다. 하나는 다양한 브라우저의 고유 한 속성을 기반으로 이들을 구별하는 것이고, 다른 하나는 브라우저의 UserAgent 속성을 분석하여 판단하는 것입니다. 대부분의 경우 값이 브라우저 유형을 결정한 후 호환성 문제를 처리하려면 브라우저 버전을 판단해야합니다. 브라우저 버전은 일반적으로 브라우저의 Useragent를 분석하여 알 수 있습니다.
먼저 다양한 브라우저와 사용자의 특성을 분석하겠습니다.
즉
IE 만 ActiveX 컨트롤 생성을 지원하므로 다른 브라우저에는 ActiveXobject 기능이없는 것이 있습니다. Window 객체에 ActiveXobject 함수가 있다고 판단하는 한 현재 브라우저가 IE인지 확인할 수 있습니다. IE의 각 버전에 대한 일반적인 사용자는 다음과 같습니다.
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 요소는 GetBoxObjectfor 함수를 가지며, 이는 DOM 요소의 위치와 크기를 얻는 데 사용됩니다 (IE에 해당하는 getBoundingClientRect 함수). 이것은 Firefox에 고유합니다. 현재 브라우저가 Firefox라고 말할 수 있습니다. 여러 버전의 Firefox의 사용자는 다음과 같습니다.
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 속성 인 특수 브라우저 로고를 제공합니다. 오페라에 대한 일반적인 사용자 이젠트는 다음과 같습니다.
오페라/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의 일반적인 사용자 기관은 다음과 같습니다.
Mozilla/5.0 (Windows; U; Windows NT 5.2) AppleWebkit/525.13 (Gecko Like Gecko) 버전/3.1 Safari/525.13
Mozilla/5.0 (iPhone; U; CPU Mac OS X와 같은 CPU) AppleWebKit/420.1 (Gecko Like Gecko) 버전/3.0 Mobile/4A93 Safari/419.3
버전 번호는 숫자 이후 버전입니다.
크롬
Chrome에는 MessageEvent 기능이 있지만 Firefox도 있습니다. 다행스럽게도 Chrome에는 Firefox의 GetBoxObjectFor 기능이 없으며이 조건에 따라 정확하게 판단 할 수 있습니다. 현재 Chrome의 Useragent는 다음과 같습니다.
Mozilla/5.0 (Windows; U; Windows NT 5.2) AppleWebkit/525.13 (Gecko Like Gecko) Chrome/0.2.149.27 Safari/525.13
그중 버전 번호는 크롬 이후에만 있습니다.
흥미롭게도 Chrome의 사용자 기관에는 Safari의 특성이 포함되어 있습니다. 아마도 Chrome이 모든 Apple 브라우저 응용 프로그램을 실행하는 기초 일 것입니다.
위의 정보를 이해하는 한 브라우저 유형 및 해당 버전을 기반으로 이러한 특성을 기반으로 할 수 있습니다. 우리는 SYS 이름 공간에서 판단 결과를 저장하고 향후 프로그램을 읽을 수있는 프론트 엔드 프레임 워크의 기본 로고 정보가 될 것입니다. 브라우저를 결정하면 SYS 네임 스페이스는 브라우저 이름의 속성을 가지며 그 값은 브라우저의 버전 번호입니다. 예를 들어, IE 7.0이 결정되면 Sys.ie의 값은 7.0입니다. Firefox 3.0이 결정되면 Sys.firefox의 값은 3.0입니다. 브라우저를 결정하는 코드는 다음과 같습니다.
[Ctrl+A 모두 참고 사항 : 외부 JS를 소개 해야하는 경우 실행하려면 새로 고침해야합니다].
IE는 가장 많은 사용자가 있고 Firefox가 있기 때문에 IE에 대한 판단을 먼저했습니다. 사용자의 순서대로 브라우저 유형을 판단하면 판단 효율성을 향상시키고 쓸모없는 작업을 덜 수행 할 수 있습니다. Chrome이 3 위를 차지하는 이유는 Chrome이 곧 시장 점유율을 가진 세 번째 브라우저가 될 것이라고 예측하기 때문입니다. 그 중에서도 브라우저 버전을 분석 할 때 일반 표현식을 사용하여 버전 정보를 해부합니다.
JavaScript가 매우 우수한 경우 다음과 같은 이전 판단 코드도 작성할 수도 있습니다.
[Ctrl+A 모두 참고 사항 : 외부 JS를 소개 해야하는 경우 실행하려면 새로 고침해야합니다].
이로 인해 JavaScript 코드가 더욱 간소화 될 수 있습니다. 물론 가독성은 조금 더 나쁩니다. 효율성을 소중히 여부에 따라 달라집니다.
다른 기능을 사용하여 브라우저를 판단하는 방법은 일반 표현식으로 사용자 에이전트를 분석하는 것보다 빠르지 만 이러한 기능은 브라우저 버전에 따라 다를 수 있습니다. 예를 들어, 브라우저의 원래 고유 한 기능이 시장에서 성공을 거두었다면 다른 브라우저 도이 기능을 추가 할 수 있으므로 브라우저의 고유 한 기능이 사라지고 판단력이 실패하게됩니다. 따라서 비교적 안전한 접근 방식은 사용자 기관의 기능을 분석하여 브라우저 유형을 판단하는 것입니다. 또한, 버전 정보를 판단하려면 브라우저의 사용자 가건을 구문 분석해야합니다.
다양한 브라우저의 UserAgent 정보를 분석함으로써 다양한 브라우저와 해당 버전을 구별하는 정규식을 얻는 것은 어렵지 않습니다. 또한 브라우저 유형 및 버전의 판단은 하나로 만들 수 있습니다. 따라서 다음 코드를 작성할 수 있습니다.
[Ctrl+A 모두 참고 사항 : 외부 JS를 소개 해야하는 경우 실행하려면 새로 고침해야합니다].
그중에서도 "...? ... : ..."과 같은 판단 표현은 코드를 단순화하는 데 사용됩니다. 판단 조건은 정규 표현의 일치 및 결과 복사를 완료 할뿐만 아니라 조건부 판단을 직접 사용하는 과제 진술입니다. 후속 버전 정보는 이전 일치 결과에서만 추출되면 매우 효율적인 코드입니다.
위의 코드는 모두 프론트 엔드 프레임 워크를 생성하기위한 사전 연구이며 5 개의 주요 브라우저에서 테스트 및 전달됩니다. 앞으로 if (sys.ie) 또는 if (sys.firefox)의 형태로 특정 브라우저를 판단하면되며 If (sys.ie == '8.0') 또는 if (sys.firefox == '3.0') 형식으로 브라우저 버전 만 판단하면됩니다.
프론트 엔드 프레임 워크 프로젝트가 시작되었으며 모든 것이 프로세스와 결과에 따라 다릅니다 ...
wulin.com의 편집자는 몇 가지 코드를 정리했습니다.
코드 사본은 다음과 같습니다.
var browser = new Object ();
browser.ismozilla = (typeof document.implementation! = 'undefined') && (typeof document.implementation.createdocument! = 'undefined') && (htmldocument! = 'undefined');
Browser.isie = Window.ActiveXObject? 사실 : 거짓;
browser.ispirefox = (navigator.useragent.tolowercase (). indexof ( "firefox")! = -1);
browser.issafari = (navigator.useragent.tolowercase (). indexof ( "safari")! = -1);
browser.isopera = (navigator.useragent.tolowercase (). indexof ( "opera")! = -1);
함수 check () {
alert (browser.isie? '즉': 'ee');
alert (browser.isfirefox? 'firefox': 'firefox가 아님');
Alert (Browser.issafari? 'safari': 'safari');
Alert (Browser.isopera? 'Opera': 'Opera');
}
Window.onload = 확인;
코드 사본은 다음과 같습니다.
함수 isbrowser () {
var sys = {};
var ua = navigator.useragent.tolowercase ();
var s;
(s = ua.match (/msie ([/d.] +)/))?sys.ie=s=s=] :
(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) {// js는 IE 브라우저로 판단됩니다
Alert ( '// www.vevb.com'+sys.ie);
if (sys.ie == '9.0') {// js는 IE 9로 판단됩니다
} else if (sys.ie == '8.0') {// js는 IE 8으로 판단됩니다
}또 다른{
}
}
if (sys.firefox) {// js는 Firefox (Firefox) 브라우저로 판단됩니다
Alert ( '// www.vevb.com'+sys.firefox);
}
if (sys.chrome) {// js는 Chrome 브라우저로 판단됩니다
경고 ( '// www.vevb.com'+sys.chrome);
}
if (sys.opera) {// js는 오페라 브라우저로 판단됩니다
Alert ( '// www.vevb.com'+sys.opera);
}
if (sys.safari) {// js는 Apple Safari 브라우저로 판단됩니다
경고 ( '// www.vevb.com'+sys.safari);
}
}
JQuery를 통해 브라우저 유형 및 브라우저 버전 번호를 얻는 기능 메소드를 공유하십시오. 특정 jQuery 코드는 다음과 같습니다.
코드 사본은 다음과 같습니다.
$ (document) .ready (function () {
varbrow = $. 브라우저;
varbinfo = "";
if (brow.msie) {binfo = "Microsoft InternetexPlorer"+brow.version;}
if (brow.mozilla) {binfo = "mozillafirefox"+brow.version;}
if (brow.safari) {binfo = "applesafari"+brow.version;}
if (brow.opera) {binfo = "opera"+brow.version;}
경고 (binfo);
});
버전 1.9부터 JQuery는 $ .Browser 및 $ .Browser.version을 제거하고 $ .support 메소드로 대체했습니다. $ .support를 이해해야하는 경우 다음을 참조하십시오.
JQuery 1.9 $ .Browser 메소드 대신 $ .Support를 사용하십시오