JS to determine browser type and version

Do you know how many kinds of browsers are in the world? In addition to our well-known Internet Explorer, Firefox, Opera and Safari, there are hundreds of browsers in the world.

A few days ago, the browser family had just been born a little prince, is Google's launch of the Chrome browser. Since Chrome was born with a pedigree, no one dared underestimate him, even though he was a little boy. Later, we often say that the browser's "four talented" will have to be called "Five golden Flowers".

In the website front-end development, browser compatibility issues This has let us rush, Chrome's birth did not know how much trouble to add to us. Browser compatibility is the first problem to be solved in front-end development framework, in order to solve the compatibility problem, we must first accurately determine the browser type and its version.

JavaScript is the primary language for front-end development, and we can write JavaScript programs to determine the type and version of the browser. JavaScript generally has two ways of judging browser types, one is based on the unique attributes of various browsers, and the other is judged by analyzing the browser's useragent properties. In many cases, after the value of the browser type is determined, you also need to determine the browser version to handle compatibility issues, and the browser version can only be determined by analyzing the browser useragent to know.

Let us first analyze the features of various browsers and their useragent.

IE

Only IE supports the creation of ActiveX controls, so she has something that other browsers do not have, which is the ActiveXObject function. As long as the Window object exists ActiveXObject function, it can be clearly determined that the current browser is ie. The typical useragent for each version of IE are as follows:

mozilla/5.0(Windows NT6.3; WOW64; trident/7.0; . net4.0e;. net4.0c; Infopath.3;. NET CLR3.5.30729;. NET CLR2.0.50727;. NET CLR3.0.30729; Rv:11.0) like Gecko Mozilla/5.0(Compatible; MSIE10.0; Windows NT6.3; WOW64; trident/7.0; . net4.0e;. net4.0c; Infopath.3; ......) Mozilla/5.0(Compatible; MSIE9.0; Windows NT6.3; .......) Mozilla/4.0(Compatible; MSIE8.0; Windows NT6.0) Mozilla/4.0(Compatible; MSIE7.0; Windows NT5.2) Mozilla/4.0(Compatible; MSIE6.0; Windows NT5.1) Mozilla/4.0(Compatible; MSIE5.0; Windows NT)

      where the version number is the number after MSIE.  
        firefox 
        DOM elements in Firefox have a getboxobjectfor function to get the location and size of the DOM element (ie corresponds to the getboundingclientrect function). This is unique to Firefox, you can tell it is the current browser is Firefox. Several versions of Firefox useragent are roughly as follows:  

        mozilla/5.05.2) gecko/2008070208 firefox/3.0. 1          Mozilla/5.05.1) gecko/20070309 firefox/2.0. 0.3          Mozilla/5.05.1) gecko/20070803 firefox/1.5. 0.12

Where the version number is the number after Firefox.

Opera

Opera offers a special browser logo, which is the Window.opera property. Opera's typical useragent are as follows:

        opera/9.275.2; U Zh-cn)         Opera/8.0  (Macintosh; PPC Mac OS X; U EN)         Mozilla/5.08.0

Where the version number is the number near opera.


Safari
The Safari browser has a opendatabase function that no other browser can do to judge Safari's logo. Safari's typical useragent are as follows:

 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 CPU like Mac OS X) applewebkit/420.1  (khtml, like Gecko) version/3.0  mobile/4a93 safari/419.3  

The version number is the number that follows versions.

Chrome
Chrome has a messageevent function, but Firefox does too. However, the good news is that Chrome does not have a Firefox getboxobjectfor function, which can be used to accurately determine the Chrome browser. Currently, Chrome's useragent is:

mozilla/5.0 (Windows; U Windows NT 5.2) applewebkit/525.13 (khtml, like Gecko) chrome/0.2.149.27 safari/525.13

Where the version number is in Chrome only after the number.

Interestingly, Chrome's useragent also contains the features of Safari, which is perhaps the basis for Chrome to run all Apple browser apps.

As long as we understand the above information, we can base these features to determine the browser type and its version. We will store the results of the judgment in the Sys namespace, which will be the basic flag information of the front-end framework for future programs to read. If a browser is identified, the Sys namespace will have a property of the browser name, and its value is the version number of the browser. For example, if IE 7.0 is determined, the value of sys.ie is 7.0, and if Firefox 3.0 is determined, the value of Sys.firefox is 3.0. The following is the code that determines the browser:

<script type= "Text/javascript" >varSys = {}; varUA =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]; //The following tests        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); </script>

We put the judgment on IE first, because the most users of IE, followed by the determination of Firefox. According to the number of users in the order to determine the browser type, can improve judgment efficiency, less do not work hard. The reason we put Chrome in third judgment is because we predict that Chrome will soon become the third-place browser for market share. In the analysis of the browser version, a regular expression is used to extract the version information.

If your JavaScript is playing very high, you can also write the previous judgment code like this:

<script type= "Text/javascript" >varSys = {}; varUA =navigator.userAgent.toLowerCase (); Window. ActiveXObject? sys.ie = Ua.match (/msie ([\d.] +)/) [1]: document.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; //The following tests        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); </script>

This will make the JavaScript code more streamlined. Of course, the readability is slightly worse, it depends on whether you pay attention to efficiency or maintainability.


Using different features to determine the browser's approach, although it is faster to analyze useragent than with regular expressions, these features may change depending on the browser version. For example, a browser-unique feature has been successful on the market, and other browsers may then join the feature, so that the unique features of the browser disappear, causing our judgment to fail. Therefore, it is relatively safe to determine the browser type by parsing the features in the useragent. Besides, judging the version information also needs to parse the browser's useragent.

By analyzing the useragent information of various browsers, it is not difficult to get a regular expression that distinguishes between various browsers and their versions. Moreover, the judgment of the browser type and version of the judgment can be completely integrated. So, we can write the following code:

<script type= "Text/javascript" >varSys = {}; varUA =navigator.userAgent.toLowerCase (); vars; (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; //The following tests        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); </script>

Among them, the adoption of the "...?" A judgment expression such as "..." to streamline the code. The judging condition is an assignment statement, which does not only match the regular expression but also the result copy, and then judge the condition directly. The subsequent version information can only be extracted from the previous matching results, which is very efficient code.

The above code is designed to create a front-end framework for pre-research, and test pass on the top five browsers. In the future, it is very graceful to judge whether a browser needs to be expressed in the form of if (sys.ie) or if (Sys.firefox), or if the browser version only needs to use if (sys.ie = = ' 8.0 ') or if (Sys.firefox = = ' 3.0 ').


The front-end framework project has started, and everything depends on the process and results.

JS to determine browser type and version