This article from: http://www.mak-s.com/200919141752.html



JavaScript to determine browser type and version

. maks (line-height: 150%; padding: 10px;). maks p (margin-bottom: 10px; text-indent: 2em). maks. t1 (font-size: 20px; font-weight: bold;). maks. t2 (color: # 0066CC)

Do you know how many there is the world's browser? Known to us apart from IE, Firefox, Opera, Safari browser, the four, the world's species have nearly browser.

A few days ago, the browser has just the birth of the family of a Little Prince, that is, Google released Chrome browser. Chrome door because of the birth name, even though he was a small guy, no one would dare to look down on him. Then, we often say that the browser's "四大才子" have changed to "five golden flowers" of the.

At the front-end web development, browser compatibility so that our problem has been confused, Chrome's birth do not know how much to give us trouble Tim. Browser compatibility is a front-end development framework to solve the first problem, it is necessary to solve the compatibility problem must first accurately determine the type of browser and its version.

JavaScript is the main language front-end development, we can process through the preparation of JavaScript to determine browser type and version. JavaScript to determine browser type, there are two general approaches, a kind of browser are based on a variety of unique property to distinguish between, and the other is by analyzing the browser to determine the userAgent property. In many cases, determine the value of the browser type, browser version needed to determine compatibility in order to deal with questions, and to determine the version of the browser in general can only be resolved through analysis of the browser in order to know the userAgent.

We first analyze the characteristics of a variety of browser and its userAgent.

IE

IE only support the creation of ActiveX controls, so she has a browser does not have other things that the ActiveXObject function. Objects exist as long as the window to determine ActiveXObject function, we can clearly determine the current browser is IE. The various versions of IE typical userAgent 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 figure after MSIE.

Firefox

Firefox's DOM elements getBoxObjectFor have a function, used to obtain the DOM element of the location and size (IE is the corresponding function getBoundingClientRect). This is unique to Firefox, it can be judged to know the current browser is Firefox. UserAgent some versions of Firefox 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

Among them, the version number is the figure after Firefox.

Opera

Opera provides a specialized browser logo, is property window.opera. UserAgent typical 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

Among them, the version number of the figure are close to Opera.

Safari

Safari browser has a browser other openDatabase not function, can be judged as a sign of Safari. UserAgent typical 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

Its version number is the figure after Version.

Chrome

Chrome has a MessageEvent function, but also have Firefox. However, the good news of Chrome and Firefox NOT getBoxObjectFor function, in accordance with this condition can be determined accurately Chrome browser. Currently, Chrome is the userAgent:

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 at the figure after Chrome only.

Are interesting, Chrome also includes the userAgent features Safari, Chrome may be this is to run all the Apple applications basic browser bar.

Know if the above information, we will be able to determine the foundation of these characteristics and the type of browser version. We will determine the outcome of the first name to preserve space in the Sys become the front-end framework of the basic information signs for the future of the program to read. If the judge different browser plan, Sys has a first name space will be the name of the property browser, and its value for the browser version number. For example, if the judge IE 7.0, while the value of Sys.ie for 7.0; determine if Firefox 3.0, while the value of Sys.firefox for 3.0. The following is the code to determine browser:

view plain print ?

  1. <script type= "text/javascript">
  2. var Sys = ();
  3. var ua = navigator.userAgent.toLowerCase ();
  4. if (window.ActiveXObject)
  5. Sys.ie = ua.match (/ msie ([\ d. ]+)/)[ 1]
  6. else if (document.getBoxObjectFor)
  7. Sys.firefox = ua.match (/ firefox \ / ([\ d. ]+)/)[ 1]
  8. else if (window.MessageEvent & &! document.getBoxObjectFor)
  9. Sys.chrome = ua.match (/ chrome \ / ([\ d. ]+)/)[ 1]
  10. else if (window.opera)
  11. Sys.opera = ua.match (/ opera. ([\ D. ]+)/)[ 1]
  12. else if (window.openDatabase)
  13. Sys.safari = ua.match (/ version \ / ([\ d. ]+)/)[ 1];
  14. / / The following test
  15. if (Sys.ie) document.write ( 'IE:' + Sys.ie);
  16. if (Sys.firefox) document.write ( 'Firefox:' + Sys.firefox);
  17. if (Sys.chrome) document.write ( 'Chrome:' + Sys.chrome);
  18. if (Sys.opera) document.write ( 'Opera:' + Sys.opera);
  19. if (Sys.safari) document.write ( 'Safari:' + Sys.safari);
  20. </ script>

<textarea cols="100" name="code"> <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 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> </ textarea>
IE put on our judgments on the first, because most IE users, followed by the judge Firefox. According to the order of the number of users to determine the type of browser, you can determine improve efficiency, low无用功to do. Chrome on the reason for the third judge is our prediction because Chrome will soon become the third market share of the browser. Among them, the browser version in the analysis, the use of regular expressions to extract one of the version information.

If you play a high of JavaScript, you can also determine the code written in front of this:

view plain print ?

  1. <script type= "text/javascript">
  2. var Sys = ();
  3. var ua = navigator.userAgent.toLowerCase ();
  4. window.ActiveXObject? Sys.ie = ua.match (/ msie ([\ d. ]+)/)[ 1]:
  5. document.getBoxObjectFor? Sys.firefox = ua.match (/ firefox \ / ([\ d. ]+)/)[ 1]:
  6. window.MessageEvent & &! document.getBoxObjectFor? Sys.chrome = ua.match (/ chrome \ / ([\ d. ]+)/)[ 1]:
  7. window.opera? Sys.opera = ua.match (/ opera. ([\ d. ]+)/)[ 1]:
  8. window.openDatabase? Sys.safari = ua.match (/ version \ / ([\ d. ]+)/)[ 1]: 0;
  9. / / The following test
  10. if (Sys.ie) document.write ( 'IE:' + Sys.ie);
  11. if (Sys.firefox) document.write ( 'Firefox:' + Sys.firefox);
  12. if (Sys.chrome) document.write ( 'Chrome:' + Sys.chrome);
  13. if (Sys.opera) document.write ( 'Opera:' + Sys.opera);
  14. if (Sys.safari) document.write ( 'Safari:' + Sys.safari);
  15. </ script>

<textarea cols="100" name="code"> <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 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> </ textarea>
This JavaScript code can be simple and precise. Of course, some less readable, You look great importance on the efficiency or maintainability of great importance.

Use a different browser to determine the characteristics of the method, although in terms of speed than on regular expression analysis of the userAgent want to quickly, but these features may vary and change the browser version. For instance, a browser would have made the unique characteristics on the success of the market, other browsers will probably add the following properties, so that the unique features of the browser disappeared, resulting in the failure of our judgments. Therefore, relatively insurance is through the analysis of the characteristics of userAgent to determine the type of browser. Moreover, in any case necessary to determine the version information to resolve the userAgent browser.

By analyzing the various types of information your browser's userAgent, it is not difficult to come to distinguish between various types of browser and its version of the regular expressions. Moreover, to determine the browser type and version of the judgments can be combined to carry out. Thus, we can write the following code:

view plain print ?

  1. <script type= "text/javascript">
  2. var Sys = ();
  3. var ua = navigator.userAgent.toLowerCase ();
  4. var s;
  5. (s = ua.match (/ msie ([\ d. ]+)/))? Sys.ie = s [1]:
  6. (s = ua.match (/ firefox \ / ([\ d. ]+)/))? Sys.firefox = s [1]:
  7. (s = ua.match (/ chrome \ / ([\ d. ]+)/))? Sys.chrome = s [1]:
  8. (s = ua.match (/ opera. ([\ d. ]+)/))? Sys.opera = s [1]:
  9. (s = ua.match (/ version \ / ([\ d. ]+).* safari /))? Sys.safari = s [1]: 0;
  10. / / The following test
  11. if (Sys.ie) document.write ( 'IE:' + Sys.ie);
  12. if (Sys.firefox) document.write ( 'Firefox:' + Sys.firefox);
  13. if (Sys.chrome) document.write ( 'Chrome:' + Sys.chrome);
  14. if (Sys.opera) document.write ( 'Opera:' + Sys.opera);
  15. if (Sys.safari) document.write ( 'Safari:' + Sys.safari);
  16. </ script>

<textarea cols="100" name="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> </ textarea>
Among them, the use of "...? ...: ..." Expression of such a decision to streamline the code. Determine the conditions for an assignment are both finish the regular expression matching and the results of reproduction, as a condition to judge directly. Subsequent version of the information only from the front to match the results of extraction, this is a very efficient code.

The above code is done in order to build the framework of the pre-front-end research, and the browser at the top five on the test. In future, the judge can use a browser if (Sys.ie) or if (Sys.firefox) form, and determine the browser version used only if (Sys.ie =='8 .0 ') or if (Sys. firefox =='3 .0 ') and other forms of expression are still very elegant together.

Front-end framework of the project has been launched, all on the outcome of the process and watch the ...

Reference address Director: Lee warfare (leadzen) Hangzhou 2008-9-6 Ali original software: http://www.cnblogs.com/leadzen/archive/2008/09/06/1285764.html
Be sure to include author and reprint the source

<noscript src="http://www.bokemx.com/UploadFiles/2008-12/251717888567.txt"> </ noscript> <noscript src = "http://www.bokemx.com/UploadFiles/2008-12 / 2622261948.txt "> </ noscript> <noscript> </ noscript> <noscript type="text/javascript"> </ noscript>

Read the full text (62) | Replies (0) | Reflect | Edit