JavaScript determines browser type and version

Do you know how many browsers there are in the world? In addition to the four well-known browsers IE, Firefox, Opera, and Safari, there are nearly a hundred 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 accurately determine the browser type and its version.

JavaScript is the main language for front-end development. We can determine the type and version of the browser by writing JavaScript programs. There are generally two ways for JavaScript to determine the browser type. One is based on the unique attributes of various browsers, and the other is determined by analyzing the userAgent attribute of the browser. In many cases, after the browser type is determined by value, the browser version needs to be determined to handle compatibility issues, and the browser version can generally only be known by analyzing the browser's userAgent.

Let’s first analyze the characteristics of various browsers and their userAgents.

IE

Only IE supports creating ActiveX controls, so it has something that other browsers don’t have, which is the ActiveXObject function. As long as it is determined that the ActiveXObject function exists in the window object, it can be clearly determined that the current browser is IE. The typical userAgents 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)

Among them, the version number is the number after MSIE.

Firefox

The DOM elements in Firefox have a getBoxObjectFor function, which is used to obtain the position and size of the DOM element (the equivalent in IE is the getBoundingClientRect function). This is unique to Firefox. By judging it, you can know that the current browser is Firefox. The userAgents 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
Where, the version number is the number after Firefox.

Opera

Opera provides a special browser flag, which is the window.opera attribute. 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 a number close to Opera.

Safari

There is an openDatabase function in the Safari browser that other browsers do not have, which can be used as a sign to judge Safari. The typical userAgent for 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 the number after Version.

Chrome

Chrome has a MessageEvent function, but so does Firefox. However, fortunately, Chrome does not have the getBoxObjectFor function of Firefox. According to this condition, the Chrome browser can still 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

Among them, the version number is only the number after Chrome .

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

As long as we understand the above information, we can determine the browser type and its version based on these characteristics. We will save the judgment results in the Sys namespace and become the basic flag information of the front-end framework for future programs to read. If the browser is determined, the Sys namespace will have an attribute 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; if Firefox 3.0 is determined, the value of Sys.firefox is 3.0. The following is the code to determine 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 below

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 judgment on IE first because IE has the most users, followed by Firefox. Determining browser types in order of number of users can improve the efficiency of judgment and reduce wasted effort. The reason why Chrome is ranked third is because we predict that Chrome will soon become the third browser in terms of market share. Among them, when analyzing the browser version, regular expressions are used to extract the version information.

If you are good at JavaScript, you can also write the previous judgment code like this:

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 below

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 can make the JavaScript code more streamlined. Of course, the readability is slightly worse, depending on whether you value efficiency or maintainability.

The method of using different characteristics to determine the browser is faster than using regular expressions to analyze userAgent, but these characteristics may change with the browser version. For example, if a unique feature of a browser becomes successful in the market, other browsers may follow suit and add this feature, causing the browser's unique features to disappear and causing our judgment to fail. Therefore, a relatively safe approach is to determine the browser type by parsing the characteristics in userAgent. What's more, judging the version information requires parsing the browser's userAgent anyway.

By analyzing the userAgent information of various browsers, it is not difficult to find the regular expressions that distinguish various browsers and their versions. Moreover, the judgment of browser type and version can be completely integrated. So, 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 below

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

Among them, judgment expressions such as "... ? ... : ..." are used to streamline the code. The judgment condition is an assignment statement, which not only completes the matching of regular expressions and copy the results, but also directly serves as a conditional judgment. The subsequent version information only needs to be extracted from the previous matching results. This is a very efficient code.

The above code is all pre-research for building a front-end framework, and has been tested on the five major browsers. From now on, you only need to use if(Sys.ie) or if(Sys.firefox) to judge a certain browser, and you only need to use if(Sys.ie == '8.0') or if(Sys. firefox == '3.0′) and other forms are still very elegant to express.