Javascript learning notes (6) browser type and Version Information Detection

Source: Internet
Author: User
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

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.