Due to the differences in css and js support from various browsers, we often need to check the browser type and version before writing code for their differences in front-end development! The following checkBrowser () function mainly detects three browsers (IE, firefox, chrome), and other browsers are interested in SyntaxHighlig.
Due to the differences in css and js support from various browsers, we often need to check the browser type and version before writing code for their differences in front-end development!
The following checkBrowser () function mainly detects three browsers (IE, firefox, chrome). other browsers can add detection code if they are interested!
Part of the HTML code: (the detection function is executed when the page is loaded)
View sourceprint? 1
2
3
4
Javascript code:
The detection principle is mainly based on the browser's user proxy header nanigator. userAgent extracts the browser, type, and version information, and uses regular expressions to easily meet our needs. If you are not familiar with regular expressions, refer to this article (regular expressions)
View sourceprint? 01 function check (reg ){
02 var ug = navigator. userAgent. toLowerCase ();
03 return reg. test (ug );
04}
05
06 function checkBrowser (){
07 var ug = navigator. userAgent. toLowerCase ();
08 var userAgent = document. getElementById ("userAgent ");
09 userAgent. innerHTML = "browser user proxy header:" + ug;
10
11 var browserType = "";
12 var ver = "";
13
14 // check IE and version
15 var IE = ug. match (/msies * d. d/); // extract the browser type and version information. Note that the match () method returns an array instead of a string.
16 var isIE = check (/msie /);
17 if (isIE ){
18 browserType = "Internet Explorer ";
19 ver = IE. join (""). match (/[0-9]/g ). join (". "); // first convert the join () method into a string, then match the version information with the match () method, and then convert the join () method into a string.
20}
21
22 // detect chrome and its version
23 var chrome = ug. match (/chrome/d. d/gi );
24 var isChrome = check (/chrome /);
25 if (isChrome ){
26 browserType = "Chrome ";
27 ver = chrome. join (""). match (/[0-9]/g). join (".");
28}
29
30 // detect firefox and its version
31 var firefox = ug. match (/firefox/d. d/gi );
32 var isFirefox = check (/firefox /);
33 if (isFirefox ){
34 browserType = "Firefox ";
35 ver = firefox. join (""). match (/[0-9]/g). join (".");
36}
37
38 var browser = document. getElementById ("browser ");
39 browser. innerHTML = "your browser is:" + browserType + "version:" + ver;
40}
PS: the user agent information of each browser is as follows:
View sourceprint? IE: Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.1; Trident/5.0; SLCC2 ;. net clr 2.0.50727 ;. net clr 3.5.30729 ;. net clr 3.0.30729; Media Center PC 6.0; InfoPath.3; BOIE9; ZHCN );
Firefox: Mozilla/5.0 (Windows NT 6.1; rv: 2.0) Gecko/20100101 Firefox/4.0;
Chrome: Mozilla/5.0 (Windows; U; Windows NT 6.1; en-US) AppleWebKit/534.13 (KHTML, like Gecko) Chrome/9.0.597.98 Safari/534.13