This article will introduce how to use Javascript to detect the type and version number of the browser, including Cheetah Browser, Sogou Browser, Aoyou Browser, 360 Speed Browser, 360 Safe Browser, QQ Browser, Baidu Browser, IE, Firefox, Chrome, safari, Opera, etc.
Reproduction diagram
Example code
<!DOCTYPE html><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>JavaScript determines browser type and version</title> <script type= "text/javascript" > /** * Get browser type and version number* Support domestic browsers: Cheetah Browser, Sogou Browser, Aoyou Browser, 360 Speed Browser, 360 Safe Browser, * QQ Browser, Baidu Browser, etc. * Support foreign browsers: IE, Firefox, Chrome, safari, Opera, etc. * Use: * Get browser version: Browser.client.version * Get the browser name (shell):Browser.client.name * @author:xuzengqiang * @since :2015-1-27 10:26:11**/var Browser=Browser || (function(window){ var document = window.document, navigator = window.navigator, agent = navigator.userAgent.toLowerCase(), //IE8+ support. Return the mode used by the browser to render the current document //IE6, IE7:undefined.IE8:8 (compatibility mode returns 7).IE9:9 (compatibility mode returns 7||8) //IE10:10(Compatible Mode 7||8||9) IEMode = document.documentMode, //Chorme chrome = window.chrome || false , System = { //user-agent agent : agent, //IE isIE : /msie/.test(agent), //Gecko kernel isGecko: agent.indexOf( "gecko" )> 0 && agent.indexOf( "like gecko" )< 0 , //webkit kernel isWebkit: agent.indexOf( "webkit" )> 0 , //Is it standard mode isStrict: document.compatMode === "CSS1Compat" , //Is subtitle supportSubTitle:function(){ return "track" in document.createElement( "track" ); }, //Is scoped supportScope:function(){ return "scoped" in document.createElement( "style" ); }, //Get the version number of IE ieVersion:function(){ try { return agent.match(/msie ([/d.]+)/)[ 1 ] || 0 ; } catch (e) { console.log( "error" ); return IEMode; } }, //Opera version number operaVersion:function(){ try { if (window.opera) { return agent.match(/opera.([/d.]+)/)[ 1 ]; } else if (agent.indexOf( "opr" ) > 0 ) { return agent.match(/opr//([/d.]+)/)[ 1 ]; } } catch (e) { console.log( "error" ); return 0 ; } }, //Description:version filtering. For example, 31.0.252.152 Only retain 31.0 versionFilter:function(){ if (arguments.length === 1 && typeof arguments[ 0 ] === "string" ) { var version = arguments[ 0 ]; start = version.indexOf( "." ); if (start> 0 ){ end = version.indexOf( "." ,start+ 1 ); if (end !== - 1 ) { return version.substr( 0 ,end); } } return version; } else if (arguments.length === 1 ) { return arguments[ 0 ]; } return 0 ; } }; try { //Browser type (IE, Opera, Chrome, Safari, Firefox) System.type = System.isIE? "IE" : window.opera || (agent.indexOf( "opr" ) > 0 )? "Opera" : (agent.indexOf( "chrome" )> 0 )? "Chrome" : //safari also provides a special way to determine window.openDatabase? "Safari" : (agent.indexOf( "firefox" )> 0 )? "Firefox" : 'unknow' ; //version number System.version = (System.type === "IE" )?System.ieVersion(): (System.type === "Firefox" )?agent.match(/firefox//([/d.]+)/)[ 1 ]: (System.type === "Chrome" )?agent.match(/chrome//([/d.]+)/)[ 1 ]: (System.type === "Opera" )?System.operaVersion(): (System.type === "Safari" )?agent.match(/version//([/d.]+)/)[ 1 ]: "0" ; //Browser shell System.shell=function(){ //Aoyou browser if (agent.indexOf( "maxthon" ) > 0 ) { System.version = agent.match(/maxthon//([/d.]+)/)[ 1 ] || System.version ; return "Aoyou browser" ; } //QQ browser if (agent.indexOf( "qqbrowser" ) > 0 ) { System.version = agent.match(/qqbrowser//([/d.]+)/)[ 1 ] || System.version ; return "QQ browser" ; } //Sogou browser if ( agent.indexOf( "se 2.x" )> 0 ) { return 'Sogou Browser' ; } //Chrome: You can also use window.chrome && window.chrome.webstore to judge if (chrome && System.type !== "Opera" ) { var external = window.external, clientInfo = window.clientInformation, //Client language: zh-cn,zh.360 will return undefined clientLanguage = clientInfo.languages; //Cheetha browser: or agent.indexOf("lbbrowser")>0 if ( external && 'LiebaoGetVersion' in external) { return 'Cheetah Browser' ; } //Baidu Browser if (agent.indexOf( "bidubrowser" )> 0 ) { System.version = agent.match(/bidubrowser//([/d.]+)/)[ 1 ] || agent.match(/chrome//([/d.]+)/)[ 1 ]; return "Baidu Browser" ; } //360 Speed Browser and 360 Safe Browser if ( System.supportSubTitle() && typeof clientLanguage === "undefined" ) { //object.key() returns an array containing enumerable attributes and method names var storeKeyLen = Object.keys(chrome.webstore).length, v8Locale = "v8Locale" in window; return storeKeyLen > 1 ? '360 Speed Browser' : '360 Safe Browser' ; } return "Chrome" ; } return System.type; }; //Browser name (if it is a shell browser, it returns the shell name) System.name = System.shell(); //Filter the version number System.version = System.versionFilter(System.version); } catch (e) { console.log( "error" ); } return { client:System }; })(window);alert(Browser.client.name+ " " +Browser.client.version);</script> </head> <body> </body></html>Summarize
The above is all about this article, I hope it will be helpful to everyone's development. If you have any questions, please leave a message to discuss.