JavaScript determines browser type and version (collation) __java

Do you know how many kinds of browsers there are in the world? In addition to our well-known IE, Firefox, Opera, Safari Four browser, there are nearly hundreds of browsers in the world.

A few days ago, the browser family had just born a little prince, the Chrome browser that Google launched. Because of the blue-blooded chrome, no one dared to underestimate him, even though he was still a little boy. Later, we often say that the "four great talent" of the browser has to be renamed as "Five Golden flowers."

In the front-end development of the Web site, browser compatibility problem has let us rush, the birth of Chrome did not know to give us a lot of trouble. Browser compatibility is the first problem to be solved by the 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 can determine browser types in general there are two ways, one is based on a variety of browser-specific properties to distinguish, the other is by analyzing the browser's useragent properties to judge. In many cases, after the value is judged by the browser type, it is also necessary to judge the browser version to handle the compatibility issue, and to judge the browser version is generally only through the analysis of the browser useragent to know.

Let's first analyze the features and useragent of various browsers.

Ie

Only IE supports the creation of ActiveX controls, so she has something that other browsers do not have, that is, the ActiveXObject function. As long as you judge the Window object exists ActiveXObject function, you can clearly determine the current browser is ie. The typical useragent of IE versions are as follows:

mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.0)
mozilla/4.0 (compatible; MSIE 7.0; Windows NT 5.2)
mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1)
mozilla/4.0 (compatible; MSIE 5.0; Windows NT)

Where the version number is the number after the MSIE.

Firefox

The DOM elements in Firefox have a getboxobjectfor function to get the position and size of the DOM element (ie corresponds to the getboundingclientrect function). This is unique to Firefox, judge it can know is the current browser is Firefox. Firefox several versions of the useragent are roughly as follows:

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
Where the version number is the number after Firefox.

Opera

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

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

Among them, the version number is close to opera's number.

Safari

Safari browser has a opendatabase function that is not available in other browsers and can be used as a marker for safari. Safari's typical useragent is 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 after version.

Chrome

Chrome has a messageevent function, but Firefox does. However, the good news is that Chrome does not have Firefox's getboxobjectfor function, which can be used to accurately determine the Chrome browser. At present, the useragent of Chrome 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 includes Safari features, which is perhaps the basis for all of the apps that Chrome can run on Apple's browser.

As soon as we know the above information, we can base these features on the browser type and its version. We will keep the result of the judgment in the Sys namespace, as the basic information of the front-end framework, for future programs to read. If you judge a browser, the Sys namespace will have a property of that browser name, and its value is the version number of the browser. For example, if you judge IE 7.0, the value of sys.ie is 7.0, and if you Judge Firefox 3.0, the Sys.firefox value is 3.0. Here is the code to judge the browser:

< script type = "Text/javascript" >
var Sys = {};
var ua = 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 of IE on the first, because IE users the most, followed by the judgement of Firefox. According to the number of users to determine the type of browser, you can improve the efficiency of judgment, less do not work hard. The reason we put Chrome on the third judgment is because we predict that Chrome will soon become the third-most-market-share browser. In the analysis of the browser version, a regular expression is used to extract the version information.

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

< script type = "Text/javascript" >
var Sys = {};
var ua = 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 a little more streamlined. Of course, a little less readable, it depends on whether you pay attention to efficiency or maintainability.

Using different features to judge the browser's approach, although useragent is faster than the regular expression analysis, these features may change with the browser version. For example, a browser-specific feature has been successful in the marketplace, and other browsers may be able to join the feature, so that the browser's unique features disappear, resulting in our judgment failure. Therefore, the relative insurance approach is to determine the browser type by parsing the features in the useragent. Moreover, the judgment version information also needs to parse the browser the useragent.

      by analyzing the useragent information of various browsers, it is not difficult to tell the regular expressions of various browsers and their versions. Moreover, the judgment of the browser type and the judgement of the version can be integrated into one. So, we can write the following code:

     < script  type = "Text/javascript" >
          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] :
    & nbsp;    (s  =  ua.match (/chrome\