利用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实现遮罩以及弹出可移动登录窗口
Jul 08 Javascript
jquery遍历之parent()和parents()的区别及parentsUntil()方法详解
Dec 02 Javascript
Jquery实现textarea根据文本内容自适应高度
Apr 03 Javascript
JavaScript String 对象常用方法详解
May 13 Javascript
js实现楼层导航功能
Feb 23 Javascript
jQuery validate 验证radio实例
Mar 01 Javascript
JavaScript常见事件对象与操作实例总结
Jan 05 Javascript
jquery操作checkbox的常用方法总结【附测试源码下载】
Jun 10 jQuery
javascript事件监听与事件委托实例详解
Aug 16 Javascript
Bootstrap实现模态框效果
Sep 30 Javascript
React组件设计模式之组合组件应用实例分析
Apr 29 Javascript
Angular+Ionic使用queryParams实现跳转页传值的方法
Sep 05 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
ZF等常用php框架中存在的问题
2008/01/10 PHP
php的curl实现get和post的代码
2008/08/23 PHP
ThinkPHP快速入门实例教程之数据分页
2014/07/01 PHP
微信公众平台开发教程②微信端分享功能图文详解
2019/04/10 PHP
Javascript MD4
2006/12/20 Javascript
jQuery实战之品牌展示列表效果
2011/04/10 Javascript
javascript实现日历控件(年月日关闭按钮)
2012/12/12 Javascript
可兼容IE的获取及设置cookie的jquery.cookie函数方法
2013/09/02 Javascript
jQuery之ajax删除详解
2014/02/27 Javascript
node.js中的http.response.getHeader方法使用说明
2014/12/14 Javascript
Bootstrap和Java分页实例第一篇
2016/12/23 Javascript
微信小程序技巧之show内容展示,上传文件编码问题
2017/01/23 Javascript
Angular2利用组件与指令实现图片轮播组件
2017/03/27 Javascript
Node.JS 循环递归复制文件夹目录及其子文件夹下的所有文件
2017/09/18 Javascript
利用Javascript实现一套自定义事件机制
2017/12/14 Javascript
vue编译打包本地查看index文件的方法
2018/02/23 Javascript
vue2使用keep-alive缓存多层列表页的方法
2018/09/21 Javascript
D3.js 实现带伸缩时间轴拓扑图的示例代码
2020/01/20 Javascript
js实现金山打字通小游戏
2020/07/24 Javascript
Vue如何循环提取对象数组中的值
2020/11/18 Vue.js
JavaScript 如何在浏览器中使用摄像头
2020/12/02 Javascript
vue常用高阶函数及综合实例
2021/02/25 Vue.js
python中使用smtplib和email模块发送邮件实例
2014/04/22 Python
使用pygame写一个古诗词填空通关游戏
2019/12/03 Python
Python分析微信好友性别比例和省份城市分布比例的方法示例【基于itchat模块】
2020/05/29 Python
Python新手如何进行闭包时绑定变量操作
2020/05/29 Python
Python进行统计建模
2020/08/10 Python
Pandas的数据过滤实现
2021/01/15 Python
可能这些是你想要的H5软键盘兼容方案(小结)
2019/04/23 HTML / CSS
英国领先的电动可调床制造商:Laybrook
2019/12/26 全球购物
Delphi软件工程师试题
2013/01/29 面试题
员工年终演讲稿
2014/01/03 职场文书
《满井游记》教学反思
2014/02/26 职场文书
公开致歉信
2019/06/24 职场文书
六年级作文之预言作文
2019/10/25 职场文书
《蓝鲸的眼睛》读后感5篇
2020/01/15 职场文书