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


Posted in Javascript onAugust 23, 2016

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

效果图

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

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

实例代码

<!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>

总结

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

Javascript 相关文章推荐
js 全兼容可高亮二级缓冲折叠菜单
Jun 04 Javascript
javascript onmouseout 解决办法
Jul 17 Javascript
JS自定义功能函数实现动态添加网址参数修改网址参数值
Aug 02 Javascript
JavaScript的jQuery库中ready方法的学习教程
Aug 14 Javascript
jquery实现平滑的二级下拉菜单效果
Aug 26 Javascript
Bootstrap3学习笔记(二)之排版
May 20 Javascript
JavaScript Ajax编程 应用篇
Jul 02 Javascript
详谈commonjs模块与es6模块的区别
Oct 18 Javascript
微信小程序视图容器(swiper)组件创建轮播图
Jun 19 Javascript
在vue项目中引入highcharts图表的方法
Jan 21 Javascript
vue2 中二级路由高亮问题及配置方法
Jun 10 Javascript
vue开发拖拽进度条滑动组件
Sep 21 Javascript
AngularJS使用ng-repeat指令实现下拉框
Aug 23 #Javascript
JS实现兼容火狐及IE iframe onload属性的遮罩层隐藏及显示效果
Aug 23 #Javascript
JS实现放大、缩小及拖拽图片的方法【可兼容IE、火狐】
Aug 23 #Javascript
jq实现左滑显示删除按钮,点击删除实现删除数据功能(推荐)
Aug 23 #Javascript
AngularJS使用ng-options指令实现下拉框
Aug 23 #Javascript
js简单获取表单中单选按钮值的方法
Aug 23 #Javascript
JS实现显示带倒影的图片横排居中放大展示特效实例【测试可用】
Aug 23 #Javascript
You might like
php 301转向实现代码
2008/09/18 PHP
phpmyadmin 常用选项设置详解版
2010/03/07 PHP
PHP合并两个数组的两种方式的异同
2012/09/14 PHP
PHP验证码生成原理和实现
2016/01/24 PHP
CodeIgniter分页类pagination使用方法示例
2016/03/28 PHP
PHP实现的简单对称加密与解密方法实例小结
2017/08/28 PHP
PHP多进程之pcntl_fork的实例详解
2017/10/15 PHP
PHP如何使用JWT做Api接口身份认证的实现
2020/02/03 PHP
W3C Group的JavaScript1.8 新特性介绍
2009/05/19 Javascript
HTML Dom与Css控制方法
2010/10/25 Javascript
使用javascript获取flash加载的百分比的实现代码
2011/05/25 Javascript
关于setInterval、setTimeout在jQuery中的使用注意事项
2011/09/28 Javascript
JS截取字符串常用方法详细整理
2013/10/28 Javascript
JavaScript修改css样式style动态改变元素样式
2013/12/16 Javascript
javascript模拟枚举的简单实例
2014/03/06 Javascript
JavaScript表单通过正则表达式验证电话号码
2014/03/14 Javascript
javascript实现网页字符定位的方法
2015/07/14 Javascript
jquery实现仿新浪微博评论滚动效果
2015/08/06 Javascript
vue 基于element-ui 分页组件封装的实例代码
2018/12/10 Javascript
详解Vue中Axios封装API接口的思路及方法
2020/10/10 Javascript
python dict remove数组删除(del,pop)
2013/03/24 Python
分享给Python新手们的几道简单练习题
2017/09/21 Python
PYTHON发送邮件YAGMAIL的简单实现解析
2019/10/28 Python
使用pth文件添加Python环境变量方式
2020/05/26 Python
用python制作个视频下载器
2021/02/01 Python
特步官方商城:Xtep
2017/03/21 全球购物
Omio中国:全欧洲低价大巴、火车和航班搜索和比价
2018/08/09 全球购物
圣彼得堡鲜花配送:Semicvetic
2020/09/15 全球购物
如何签定毕业生就业协议书
2014/09/28 职场文书
测量员岗位职责
2015/02/14 职场文书
企业员工辞职信范文
2015/05/12 职场文书
2019七夕节祝福语36句,快来收藏吧
2019/08/06 职场文书
Mysql Online DDL的使用详解
2021/05/20 MySQL
tensorflow中的梯度求解及梯度裁剪操作
2021/05/26 Python
教你如何使用Python实现二叉树结构及三种遍历
2021/06/18 Python
深入理解CSS 中 transform matrix矩阵变换问题
2021/08/30 HTML / CSS