利用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 相关文章推荐
jquery validate 自定义验证方法介绍 日期验证
Feb 27 Javascript
推荐8款jQuery轻量级树形Tree插件
Nov 12 Javascript
全面解析Bootstrap表单使用方法(表单按钮)
Nov 24 Javascript
JavaScript文档碎片操作实例分析
Dec 12 Javascript
给Easyui-Datebox设置隐藏或者不可用的解决方法
May 26 Javascript
bootstrap 通过加减按钮实现输入框组功能
Nov 15 Javascript
JavaScript面试出现频繁的一些易错点整理
Mar 29 Javascript
浅谈webpack 自动刷新与解析
Apr 09 Javascript
mockjs+vue页面直接展示数据的方法
Dec 19 Javascript
JavaScript实现动态留言板
Mar 16 Javascript
深入webpack打包原理及loader和plugin的实现
May 06 Javascript
ES6扩展运算符和rest运算符用法实例分析
May 23 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 函数语法介绍一
2009/06/14 PHP
php实现生成带二维码图片并强制下载功能
2018/02/24 PHP
php生成短网址/短链接原理和用法实例分析
2020/05/29 PHP
如何在PHP中生成随机数
2020/06/04 PHP
js操作时间(年-月-日 时-分-秒 星期几)
2010/06/20 Javascript
使用jQuery实现dropdownlist的联动效果(sharepoint 2007)
2011/03/30 Javascript
javascript 弹出窗口中是否显示地址栏的实现代码
2011/04/14 Javascript
js下将字符串当函数执行的方法
2011/07/13 Javascript
JS简单的图片放大缩小的两种方法
2013/11/11 Javascript
jquery实现的鼠标拖动排序Li或Table
2014/05/04 Javascript
10分钟学会写Jquery插件实例教程
2014/09/06 Javascript
JavaScript fontsize方法入门实例(按照指定的尺寸来显示字符串)
2014/10/17 Javascript
详解JavaScript中常用的函数类型
2015/11/18 Javascript
详解maxlength属性在textarea里奇怪的表现
2015/12/27 Javascript
javascript实现右侧弹出“分享到”窗口效果
2016/02/01 Javascript
JavaScript类型系统之布尔Boolean类型详解
2016/06/26 Javascript
AngularJS基础 ng-mouseleave 指令详解
2016/08/02 Javascript
Vue学习笔记进阶篇之vue-router安装及使用方法
2017/07/19 Javascript
微信小程序-滚动消息通知的实例代码
2017/08/03 Javascript
Vuejs 2.0 子组件访问/调用父组件的方法(示例代码)
2018/02/08 Javascript
bootstrap-treeview实现多级树形菜单 后台JSON格式如何组织?
2019/07/26 Javascript
[01:02:38]DOTA2-DPC中国联赛定级赛 LBZS vs Phoenix BO3第二场 1月10日
2021/03/11 DOTA
使用Template格式化Python字符串的方法
2019/01/22 Python
对Python3使运行暂停的方法详解
2019/02/18 Python
python保留小数位的三种实现方法
2020/01/07 Python
美国著名的女性内衣零售商:Frederick’s of Hollywood
2018/02/24 全球购物
Easy Spirit官网:美国休闲鞋履中的代表品牌
2019/04/12 全球购物
MYPROTEIN澳大利亚官方网站:欧洲运动营养品牌
2019/06/26 全球购物
办公室主任主任岗位责任制
2014/02/11 职场文书
环卫工人先进事迹材料
2014/06/02 职场文书
小学运动会口号
2014/06/07 职场文书
感情真挚的毕业生求职信
2014/07/19 职场文书
海洋天堂观后感
2015/06/05 职场文书
2015暑假实习报告范文
2015/07/13 职场文书
sql server删除前1000行数据的方法实例
2021/08/30 SQL Server
详解Mysql数据库平滑扩容解决高并发和大数据量问题
2022/05/25 MySQL