利用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 相关文章推荐
javascript 全等号运算符使用说明
May 31 Javascript
仿jQuery的siblings效果的js代码
Aug 09 Javascript
JavaScript高级程序设计阅读笔记(六) ECMAScript中的运算符(二)
Feb 27 Javascript
JavaScript调用ajax获取文本文件内容实现代码
Mar 28 Javascript
学习使用grunt来打包JavaScript和CSS程序的教程
Jan 04 Javascript
BootStrap 智能表单实战系列(二)BootStrap支持的类型简介
Jun 13 Javascript
第一次接触神奇的Bootstrap基础排版
Jul 26 Javascript
Vue方法与事件处理器详解
Dec 01 Javascript
jQuery zTree树插件简单使用教程
Jan 10 Javascript
理解javascript中的Function.prototype.bind的方法
Feb 03 Javascript
JS使用setInterval计时器实现挑战10秒
Nov 08 Javascript
Vue+Element-U实现分页显示效果
Nov 15 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
火影忍者:这才是千手柱间和扉间的真正死因,角都就比较搞笑了!
2020/03/10 日漫
PHP安全配置
2006/10/09 PHP
php环境配置 php5 mysql5 apache2 phpmyadmin安装与配置
2006/11/17 PHP
常见php数据文件缓存类汇总
2014/12/05 PHP
Jquery之美中不足小结
2011/02/16 Javascript
关于js中for in的缺陷浅析
2013/12/02 Javascript
js文件包含的几种方式介绍
2014/09/28 Javascript
Bootstrap每天必学之按钮
2015/11/26 Javascript
常见JS验证脚本汇总
2015/12/01 Javascript
JavaScript驾驭网页-获取网页元素
2016/03/24 Javascript
JS组件Bootstrap Table布局详解
2016/05/27 Javascript
bootstrap输入框组代码分享
2016/06/07 Javascript
jQuery+ThinkPHP+Ajax实现即时消息提醒功能实例代码
2017/03/21 jQuery
JavaScript用二分法查找数据的实例代码
2017/06/17 Javascript
微信小程序 数据绑定及运算的简单实例
2017/09/20 Javascript
vue-router的使用方法及含参数的配置方法
2018/11/13 Javascript
vue实现双向绑定和依赖收集遇到的坑
2018/11/29 Javascript
微信小程序时间标签和时间范围的联动效果
2019/02/15 Javascript
[04:31]2016国际邀请赛中国区预选赛妖精采访
2016/06/27 DOTA
[01:02:32]DOTA2-DPC中国联赛 正赛 iG vs PSG.LGD BO3 第二场 2月26日
2021/03/11 DOTA
python局部赋值的规则
2013/03/07 Python
Python类的用法实例浅析
2015/05/27 Python
python pandas库的安装和创建
2019/01/10 Python
pytorch实现focal loss的两种方式小结
2020/01/02 Python
Python如何获取Win7,Win10系统缩放大小
2020/01/10 Python
解决Keras 中加入lambda层无法正常载入模型问题
2020/06/16 Python
Python实现http接口自动化测试的示例代码
2020/10/09 Python
智利最大的网上商店:Linio智利
2016/11/24 全球购物
菲律宾最大的网上花店和礼品店:PhilFlower.com
2018/02/09 全球购物
英国高街电视:High Street TV
2018/05/22 全球购物
2014年医学生毕业自我鉴定
2014/03/26 职场文书
北京奥运会口号
2014/06/21 职场文书
个人遵守党的政治纪律情况对照检查材料
2014/09/26 职场文书
2014年幼儿园教师工作总结
2014/11/08 职场文书
关于公司年会的开幕词
2016/03/04 职场文书
Python使用DFA算法过滤内容敏感词
2022/04/22 Python