Determine the browser type and version using JavaScript

Do you know how many browsers are available in the world? In addition to the four well-known browsers, IE, Firefox, Opera, and Safari, there are nearly browsers in the world.

Do you know how many browsers are available in the world? In addition to the four well-known browsers, IE, Firefox, Opera, and Safari, there are nearly browsers in the world.

Browser compatibility is the first problem to be solved by the front-end development framework. To solve the compatibility problem, you must first determine the browser type and version accurately.

JavaScript is the main language for front-end development. We can compile JavaScript programs to determine the browser type and version. There are two methods to determine the browser type in JavaScript: one is to distinguish based on the unique attributes of various browsers, and the other is to judge by analyzing the userAgent attributes of the browser. In many cases, after determining the browser type, you must determine the browser version to handle compatibility issues. However, you can only determine the browser version by analyzing the browser's userAgent.

Let's analyze the features of various browsers and Their userAgent.

IE

Only IE supports the creation of ActiveX controls, so she has something that is not available in other browsers, namely the ActiveXObject function. As long as you determine that the window object has the ActiveXObject function, you can clearly determine that the current browser is IE. The typical userAgent versions 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 number is a number after MSIE.

Firefox

All DOM elements in Firefox have a getBoxObjectFor function to obtain the location and size of the DOM element (IE corresponds to the getBoundingClientRect function ). This is exclusive to Firefox. It can be determined that the current browser is Firefox. The userAgent 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 number is a number after Firefox.

Opera

Opera provides a special browser flag, that is, the window. opera attribute. The typical userAgent of Opera 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

The version number is a number near Opera.

Safari

Safari has an openDatabase function that is not available in other browsers and can be used as a flag for judging Safari. The typical userAgent of Safari 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 a number after Version.

Chrome

Chrome has a MessageEvent function, but Firefox does. However, Chrome does not have the getBoxObjectFor function of Firefox. Based on this condition, the Chrome browser can be accurately determined. 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

The version number is only the number after Chrome.

Interestingly, Chrome's userAgent also contains Safari features. Maybe this is the basis for Chrome to run all Apple browser applications.

Once we understand the above information, we can base these features to determine the browser type and version. We will save the judgment results in the Sys namespace and become the basic identifier information of the front-end framework for future programs to read. If a browser is identified, Sys namespace will have an attribute of the browser name, whose value is the version number of the browser. For example, if IE 7.0 is determined, Sys. ie is 7.0; If Firefox 3.0 is determined, Sys. firefox is 3.0. The following code determines the browser:

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]; // 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 );

 

We put the IE judgment first, because IE has the most users, followed by Firefox. Judging the browser type in the order of users can improve the judgment efficiency and reduce useless work. We put Chrome in the third judgment because we predict that Chrome will soon become the third-largest browser in the market. When analyzing the browser version, the regular expression is used to extract the version information.

If your JavaScript code is very popular, you can also write the previous judgment Code as follows:

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; // 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 );

This simplifies JavaScript code. Of course, the readability is slightly lower, depending on whether you pay attention to efficiency or maintainability.

Different features are used to determine the browser method. Although it is faster than using regular expressions to analyze userAgent, these features may change with the browser version. For example, if a browser has been successful in the market due to its unique features, other browsers may also add this feature to it, so that the unique features of the browser disappear, leading to failure in our judgment. Therefore, it is relatively safe to determine the browser type by parsing the features in userAgent. Besides, to determine the version information, you also need to parse the browser's userAgent.

By analyzing the userAgent information of various browsers, it is not difficult to determine the regular expressions of various browsers and their versions. In addition, the judgment on the browser type and version can be fully integrated. Therefore, we can write the following code:

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; // 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 );

In this example, "... ? ... :..." This judgment expression is used to streamline the code. The judgment condition is a value assignment statement that completes Regular Expression matching and result copying, and directly serves as a condition judgment. The subsequent version information only needs to be extracted from the previous matching results, which is a very efficient code.

The above code is pre-developed to build a front-end framework and tested on five browsers. In the future, to judge a browser, you only need to use if (Sys. ie) or if (Sys. to determine the browser version, you only need to use if (Sys. ie = '8. 0') or if (Sys. firefox = '3. 0 ') and other forms, expression is very elegant.