More reliable JS Judgment browser and its version

Source: Internet
Author: User

All front-end developers have no way to avoid a problem, that is, browser version judgment, when we can not avoid the need for browser version judgment, the predecessors will often tell us, can judge useragent this is used to mark the browser string, by judging the character of the string to determine the browser version. But now the browser is endless, many browsers have built-in change useragent options, or specialized plug-ins, so that useragent tell us more and more inaccurate information. So what is the way to judge the browser version is more reliable? Check the browser vendor documentation, we are not difficult to find, many browser manufacturers in fact, we have built-in special labeling method, or have its very unique DOM object, using these, we can accurately judge the browser, and even determine the version number. Let's start with the demo. Let's start with a simple first.

1.presto Kernel (Opera)
There is a unique Window.opera object in the Opera browser, with the Opera.version () to get the version number directly, which is the official built-in method.

Currently, there is no such built-in logo for the WebKit Core opera.

2.webkit kernel (Safari, Chrome, Maxthon3 high-speed mode)
The Window object in the browser of the WebKit kernel starts with "webkitxxxxx", which is unique to other browser kernels.
1) in Safari, the value of Navigator.vendor is "Apple Computer, Inc."
2) There are two unique objects in Chrome window.google, Window.chrome, Window.chromium
3) Maxthon under Window.external.mxVersion for version number

3.Gecko Kernel (Firefox)
inherited Netscape Browser The mantle of Firefox still retains the Window.netscape object, and the value of Navigator.product is "Gecko"

4.IE
IE's JScript unique conditional annotations can be easily distinguished from other browsers, Document.documentmode can judge IE8 above the version number, I5, E6, 7 can be differentiated according to the DOM object differences.


The principle is finished, the following write a demo, with the above method to rewrite the $.browser jquery. Object.

(function(Win, $) {varDoc =Win.document, Nav=Win.navigator, HTML=doc.documentelement;//Browser version judgment/*@cc_on @if (@_jscript) $.browser = {msie:true, Version:doc.documentMode | | (Doc.compatmode = = "Css1compat"?) "XMLHttpRequest" in win?    7:6: 5)}; Nav.language = nav.userlanguage; @else @*/    if(Win.opera) {//Opera$.browser ={opera:true, Version:opera.version ()}; Nav.language= Nav.language.replace (/-[a-z]{2}$/,function(str) {returnstr.touppercase (); });//20150115 test only does not work for Opera browser, others are OK}Else {        functionBrowser (name) {if( !$.browser[name]) {$.browser= {version:true}; $.browser[name]=true; }        }        if(Win.netscape && nav.product = = "Gecko" ) {            //FirefoxBrowser ("Mozilla"); } Else {            //WebKitBrowser ("WebKit"); $.browser.chrome= !!Win.chrome; $.browser.safari=/^apple\s+/i.test (Nav.vendor); }    }/*@end @*/})( This, jQuery);

In addition: Console.log ("v" = = = = "\v")

IE8 the following browsers will return True;ie9,chrome,firefox will return false, because ie8,7,6 will compile both V and \v into vertical tabs.

Self-test: At present only opera can not judge, because now joined the WebKit Core Opera has no longer have window.opera, I hope you find a better solution to determine the browser type of way!
"From: http://www.w3cfuns.com/article-2440-1-1.html"

More reliable JS Judgment browser and its version

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.