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. 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:
The 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:
The 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:
The 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:
The 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:
