Determine the browser type and version using JavaScript

A few days ago, the browser family gave birth to a little prince, Google's Chrome browser. Because of the birth of Chrome, although he is still a little guy, no one dares to underestimate him. In the future, we often say that the browser's "Four talents" has to be renamed as "five golden flowers.
In front-end development of websites, browser compatibility problems have left us in a hurry. Chrome's birth does not know how much trouble we need to add. 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:
Copy codeThe Code is 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:
Copy codeThe Code is 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:
Copy codeThe Code 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:
Copy codeThe Code 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:
Copy codeThe Code is as follows:
<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];
// Perform 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 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:
Copy codeThe Code is as follows:
<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;
// Perform 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 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:
Copy codeThe Code is as follows:
<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;
// Perform 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>

In this example, "...?" 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.
The front-end framework project has been started, and everything will be viewed and the results...
Original: leadzen Alibaba software Hangzhou