利用JavaScript判断浏览器类型及版本

2019-11-20 09:10:25

字体：大中小

来源：转载

供稿：网友

本文将介绍如何使用Javascript来检测浏览器的类型以及版本号，包括猎豹浏览器、搜狗浏览器、傲游浏览器、360极速浏览器、360安全浏览器、QQ浏览器、百度浏览器、IE,Firefox,Chrome,safari,Opera等。

效果图

实例代码

<!DOCTYPE html><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>JavaScript判断浏览器类型及版本</title>  <script type= "text/javascript" > /** * 获取浏览器类型以及版本号 * 支持国产浏览器:猎豹浏览器、搜狗浏览器、傲游浏览器、360极速浏览器、360安全浏览器、 * QQ浏览器、百度浏览器等. * 支持国外浏览器:IE,Firefox,Chrome,safari,Opera等. * 使用方法: * 获取浏览器版本:Browser.client.version * 获取浏览器名称(外壳):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+支持.返回浏览器渲染当前文档所用的模式     //IE6,IE7:undefined.IE8:8(兼容模式返回7).IE9:9(兼容模式返回7||8)     //IE10:10(兼容模式7||8||9)     IEMode = document.documentMode,       //chorme     chrome = window.chrome || false ,     System = {       //user-agent       agent : agent,       //是否为IE       isIE : /msie/.test(agent),       //Gecko内核       isGecko: agent.indexOf( "gecko" )> 0 && agent.indexOf( "like gecko" )< 0 ,       //webkit内核       isWebkit: agent.indexOf( "webkit" )> 0 ,       //是否为标准模式       isStrict: document.compatMode === "CSS1Compat" ,       //是否支持subtitle       supportSubTitle:function(){         return "track" in document.createElement( "track" );       },       //是否支持scoped       supportScope:function(){         return "scoped" in document.createElement( "style" );       },       //获取IE的版本号       ieVersion:function(){         try {          return agent.match(/msie ([/d.]+)/)[ 1 ] || 0 ;         } catch (e) {          console.log( "error" );          return IEMode;         }       },       //Opera版本号       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 ;         }       },       //描述:version过滤.如31.0.252.152 只保留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 {     //浏览器类型(IE、Opera、Chrome、Safari、Firefox)     System.type = System.isIE? "IE" :       window.opera || (agent.indexOf( "opr" ) > 0 )? "Opera" :       (agent.indexOf( "chrome" )> 0 )? "Chrome" :       //safari也提供了专门的判定方式       window.openDatabase? "Safari" :       (agent.indexOf( "firefox" )> 0 )? "Firefox" :          'unknow' ;            //版本号      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" ;          //浏览器外壳     System.shell=function(){       //遨游浏览器       if (agent.indexOf( "maxthon" ) > 0 ) {         System.version = agent.match(/maxthon//([/d.]+)/)[ 1 ] || System.version ;         return "傲游浏览器" ;       }       //QQ浏览器       if (agent.indexOf( "qqbrowser" ) > 0 ) {         System.version = agent.match(/qqbrowser//([/d.]+)/)[ 1 ] || System.version ;         return "QQ浏览器" ;       }              //搜狗浏览器       if ( agent.indexOf( "se 2.x" )> 0 ) {         return '搜狗浏览器' ;       }              //Chrome:也可以使用window.chrome && window.chrome.webstore判断       if (chrome && System.type !== "Opera" ) {         var external = window.external,           clientInfo = window.clientInformation,           //客户端语言:zh-cn,zh.360下面会返回undefined           clientLanguage = clientInfo.languages;                  //猎豹浏览器:或者agent.indexOf("lbbrowser")>0         if ( external && 'LiebaoGetVersion' in external) {           return '猎豹浏览器' ;         }         //百度浏览器         if (agent.indexOf( "bidubrowser" )> 0 ) {           System.version = agent.match(/bidubrowser//([/d.]+)/)[ 1 ] ||             agent.match(/chrome//([/d.]+)/)[ 1 ];           return "百度浏览器" ;         }         //360极速浏览器和360安全浏览器         if ( System.supportSubTitle() && typeof clientLanguage === "undefined" ) {           //object.key()返回一个数组.包含可枚举属性和方法名称           var storeKeyLen = Object.keys(chrome.webstore).length,             v8Locale = "v8Locale" in window;           return storeKeyLen > 1 ? '360极速浏览器' : '360安全浏览器' ;          }         return "Chrome" ;       }       return System.type;        };      //浏览器名称(如果是壳浏览器,则返回壳名称)     System.name = System.shell();     //对版本号进行过滤过处理     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>

总结

以上就是本文的全部内容，希望对大家的开发能有所帮助。如果有疑问可以留言讨论。

上一篇：Jquery组件easyUi实现表单验证示例

下一篇：AngularJS使用ng-repeat指令实现下拉框