웹사이트 프론트엔드 개발에서는 이미 브라우저 호환성 문제로 인해 크롬의 탄생이 우리를 더 고민하게 만들었습니다. 브라우저 호환성은 프런트엔드 개발 프레임워크가 해결해야 할 첫 번째 문제입니다. 호환성 문제를 해결하려면 먼저 브라우저 유형과 버전을 정확하게 파악해야 합니다.
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 ; ko) 오페라 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 (KHTML, like Gecko) 버전/3.0 모바일/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입니다. 브라우저를 판별하는 코드는 다음과 같습니다.
]
我们把对IE的判断放在第一，因为IE的用户最多，其次是判断Firefox。按使用者多少的顺序来判断浏览器类型，可以提高判断效率，少做无用功。之所以将Chrome放在第三判断，是因为我们预测Chrome很快会成为市场占有率第三的浏览器。其中，在分析浏览器版本时，用到了正则表达式来析取其中的版本信息。
如果你的JavaScript玩得很高，你还可以将前面的判断代码写成这样：
这样可以使JavaScript代码更精简些。当然，可读性稍差一些，就看你是重视效率还是重视可维护性了。
使用不同特征来判断浏览器的方法，虽然在速度上比用正则表达式分析userAgent要来的快，不过这些特征可能会随浏览器版本而变化。比如，一种浏览器本来独有的特性取得了市场上的成功，其他浏览器也就可能跟着加入该特性，从而使该浏览器的独有特征消失，导致我们的判断失败。因此，相对比较保险的做法是通过解析userAgent中的特征来判断浏览器类型。何况，反正判断版本信息也需要解析浏览器的userAgent的。
通过分析各类浏览器的userAgent信息，不难得出分辨各类浏览器及其版本的正则表达式。而且，对浏览器类型的判断和版本的判断完全可以合为一体地进行。于是，我们可以写出下面的代码：
其中，采用了“... ? ... : ...”这样的判断表达式来精简代码。判断条件是一条赋值语句，既完成正则表达式的匹配及结果复制，又直接作为条件判断。而随后的版本信息只需从前面的匹配结果中提取即可，这是非常高效的代码。
以上的代码都是为了打造前端框架所做的预研，并在五大浏览器上测试通过。今后，判断某种浏览器只需用if(Sys.ie)或if(Sys.firefox)等形式，而判断浏览器版本只需用if(Sys.ie == '8.0')或if(Sys.firefox == '3.0')等形式，表达起来还是非常优雅的。
前端框架项目已经启动，一切就看过程和结果了...
脚本之家小编又为大家整理了几个代码：
var Browser=new Object();
Browser.isMozilla=(typeof document.implementation!='undefined')&&(typeof document.implementation.createDocument!='undefined')&&(typeof HTMLDocument!='undefined');
Browser.isIE=window.ActiveXObject ? true : false;
Browser.isFirefox=(navigator.userAgent.toLowerCase().indexOf("firefox")!=-1);
Browser.isSafari=(navigator.userAgent.toLowerCase().indexOf("safari")!=-1);
Browser.isOpera=(navigator.userAgent.toLowerCase().indexOf("opera")!=-1);
function check(){
alert(Browser.isIE?'ie':'not ie');
alert(Browser.isFirefox?'Firefox':'not Firefox');
alert(Browser.isSafari?'Safari':'not Safari');
alert(Browser.isOpera?'Opera':'not Opera');
}
window.onload=check;
function isBrowser(){
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){//Js가 IE 브라우저라고 판단
Alert('http://www.jb51.net' Sys.ie);
if(Sys . ie=='9.0'){//Js는 IE 9로 판단
}else if(Sys.ie=='8.0'){//Js는 IE 8로 판단
}else{
}
}
if(Sys.firefox){//Js가 Firefox 브라우저라고 판단합니다
Alert('http://www.jb51.net' Sys.firefox);
}
if(Sys.chrome){//Js가 Google Chrome 브라우저라고 판단합니다
Alert('http://www.jb51.net' Sys.chrome);
}
if( Sys.opera){//Js 판단은 오페라 브라우저
Alert('http://www.jb51.net' Sys.opera);
}
if(Sys.safari){//Js Apple 사파리 브라우저
Alert('http://www.jb51.net' Sys.safari);
}
}
에 대한 판단
jquery를 통해 브라우저 유형과 브라우저 버전 번호를 얻는 함수 방법을 공유합니다. 구체적인 jquery 코드는 다음과 같습니다.
$(document).ready(function( ){
varbrow=$.browser;
varbInfo="";
if(brow.msie){bInfo="MicrosoftInternetExplorer" brow.version;}
if(brow.mozilla){bInfo ="MozillaFirefox " brow.version;}
if(brow.safari){bInfo="AppleSafari" brow.version;}
if(brow.opera){bInfo="Opera" brow.version;}
경고(bInfo);
});
jQuery 버전 1.9부터 $.browser 및 $.browser.version이 제거되고 $.support 메소드로 대체되었습니다. $.support에 대해 알고 싶다면 다음을 참조하세요.
jQuery 1.9는 $.browser 메서드 대신 $.support를 사용합니다
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
