JS Browser type inference method

In front of the website development, browser compatibility issues This has let us Rob, chrome but also gave birth not to know how much trouble we add.

Browser compatibility is the first issue that will be addressed by the front-end development framework. The compatibility issue to be resolved must first accurately infer the browser type and its version number. JavaScript is the primary language for front-end development. We can infer the browser type and version number by writing a JavaScript program.

JavaScript infers that there are generally two ways of browser type. One is based on the unique attributes of the various browsers, and one is inferred by analyzing the browser's UserAgent property. In many cases. After the value is inferred from the browser type, it is also necessary to infer the browser version number to handle compatibility issues. The inference that the browser version number is generally only through the analysis of the browser's useragent ability 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 no other browser has, which is the ActiveXObject function.

Just infer that the Window object has a ActiveXObject function. will be able to understand the inference that the current browser is ie. The typical useragent for each version of IE 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)

The version is the number after MSIE.

    FirefoxThe DOM element in Firefox has a getboxobjectfor function. Used to get the location and size of the DOM element (ie corresponds to the getboundingclientrect function). This is unique to Firefox, it can be inferred that it is the current browser is Firefox.

The useragent of several versions of Firefox 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

The version is the number after Firefox.
      OperaOpera offers a special browser logo. is the Window.opera property.

Opera's typical useragent are 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

The version is the number near opera.
       Safari

The Safari Browser has a opendatabase function that is not available in other browsers, which can be used to infer safari flags. Safari typical useragent such as the following:

<pre name= "Code" class= "JavaScript" >mozilla/5.0 (Windows; U Windows NT 5.2) applewebkit/525.13 (khtml, like Gecko) version/3.1 safari/525.13mozilla/5.0 (iPhone; U CPU like Mac OS X) applewebkit/420.1 (khtml, like Gecko) version/3.0 mobile/4a93 safari/419.3

It is a number after version.

Chrome Chrome has a messageevent function. But Firefox also has.

But, fortunately, Chrome doesn't have the Getboxobjectfor function for Firefox. Based on this condition, it is possible to accurately infer the Chrome browser. For now, 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
Of The number after the version is in Chrome.

Interestingly, Chrome's useragent also includes the features of Safari. Maybe that's the basis for Chrome to do all the Apple browser apps.

Just to understand the above information, we can base these features to infer the browser type and its version number. We will store the inferred results in the Sys namespace as the basic flag information for the front-end framework. For future programs to read. Assuming that a browser is inferred, the Sys namespace will have a property of the browser name with a value of the browser's version number. Like what. Assuming that IE 7.0 is inferred, the value of sys.ie is 7.0, and if Firefox 3.0 is inferred, the value of Sys.firefox is 3.0. The following is the code that infers 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 inference of IE on the first, because IE users most, followed by inference Firefox. The inference efficiency can be improved by inferring the browser type in the order of how many users. be less diligent.

The reason we put Chrome on the third inference is that we predict that Chrome will soon become the third most market share of the browser.

Of When parsing the browser version number, a regular table is used to extract the version number information.

Let's say your JavaScript is playing very high. You can also write the preceding inference code like this:


<script type= "Text/javascript" >

<        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> 
 

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 more streamlined.

Of course, the readability is slightly worse. It depends on whether you value the efficiency or the maintainability.

Use different features to infer the method of the browser, although at a faster rate than with a regular table to analyze the useragent to come. Only these features may vary with the browser version number.

For example, a browser-unique feature has been successful on the market, and other browsers may have added that feature to make the browser's unique features disappear. Cause our inference to fail. Therefore, it is relatively safe to infer the browser type by parsing the features in the useragent. Furthermore, it is also necessary to parse the browser's useragent to infer the version number information anyway.

By analyzing the useragent information of various kinds of browsers, it is not difficult to find out the normal expressions of different browsers and their version numbers. Also, the inference of the browser type and the inference of the version number can be fully integrated.

So. We are able to 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]:        (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 test        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>

The use of "...?"

... this inference expression to streamline the code. The inference condition is an assignment statement, which completes the matching of the normal table and the result copy, and is directly inferred as the condition. The subsequent version number information only needs to 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 tested on the top five browsers. In the future, it is inferred that a browser only needs the form of if (sys.ie) or if (Sys.firefox), whereas the inferred browser version number is only required if (sys.ie = = ' 8.0 ') or if (Sys.firefox = = ' 3.0 '). The expression is still very elegant.


Method Two:

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">

 
Copyright notice: This article Bo Master original articles, blogs, without consent may not be reproduced.
 
JS Browser type inference method