利用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 多浏览器分别判断代码
Apr 01 Javascript
JavaScript版的TwoQueues缓存模型
Dec 29 Javascript
jquery代码实现简单的随机图片瀑布流效果
Apr 20 Javascript
JavaScript实现简单的拖动效果
Jul 02 Javascript
微信小程序 教程之模板
Oct 18 Javascript
从零学习node.js之模块规范(一)
Feb 21 Javascript
Vue.js实战之Vuex的入门教程
Apr 01 Javascript
jquery实现异步加载图片(懒加载图片一种方式)
Apr 24 jQuery
JS数组操作之增删改查的简单实现
Aug 21 Javascript
Javascript刷新页面的实例
Sep 23 Javascript
axios解决高并发的方法:axios.all()与axios.spread()的操作
Nov 09 Javascript
JS前端使用canvas实现物体的点选示例
Aug 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
跟我学Laravel之配置Laravel
2014/10/15 PHP
CI框架中数据库操作函数$this-&gt;db-&gt;where()相关用法总结
2016/05/17 PHP
PHP信号处理机制的操作代码讲解
2019/04/19 PHP
CSDN轮换广告图片轮换效果
2007/03/27 Javascript
判断iframe是否加载完成的完美方法
2010/01/07 Javascript
jquery链式操作的正确使用方法
2014/01/06 Javascript
深入剖析JavaScript中的枚举功能
2014/03/06 Javascript
Jquery实现的角色左右选择特效
2014/05/21 Javascript
JS中prototype的用法实例分析
2015/03/19 Javascript
整理Javascript函数学习笔记
2015/12/01 Javascript
基于jQuery的网页影音播放器jPlayer的基本使用教程
2016/03/08 Javascript
js实现图片缓慢放大缩小效果
2016/08/02 Javascript
使用伪命名空间封装保护独自创建的对象方法
2016/08/04 Javascript
switch语句的妙用(必看篇)
2016/10/03 Javascript
windows下vue-cli及webpack搭建安装环境
2017/04/25 Javascript
nodejs+websocket实时聊天系统改进版
2017/05/18 NodeJs
Javascript之图片的延迟加载的实例详解
2017/07/24 Javascript
详解vue-cli快速构建vue应用并实现webpack打包
2017/12/13 Javascript
vue用Object.defineProperty手写一个简单的双向绑定的示例
2018/07/09 Javascript
echarts实现词云自定义形状的示例代码
2019/02/20 Javascript
Vue项目部署的实现(阿里云+Nginx代理+PM2)
2019/03/26 Javascript
解决VantUI popup 弹窗不弹出或无蒙层的问题
2020/11/03 Javascript
Python简单进程锁代码实例
2015/04/27 Python
Python设计模式之职责链模式原理与用法实例分析
2019/01/11 Python
计算机二级python学习教程(1) 教大家如何学习python
2019/05/16 Python
Django获取应用下的所有models的例子
2019/08/30 Python
Flask项目中实现短信验证码和邮箱验证码功能
2019/12/05 Python
django admin管理工具自定义时间区间筛选器DateRangeFilter介绍
2020/05/19 Python
python urllib和urllib3知识点总结
2021/02/08 Python
雨花台导游词
2015/02/06 职场文书
幼师个人总结范文
2015/02/28 职场文书
实习证明模板
2015/06/16 职场文书
新农村建设指导员工作总结
2015/08/13 职场文书
年终奖金发放管理制度,中小企业适用,拿去救急吧!
2019/07/12 职场文书
「海贼王」112.9万粉丝纪念图标公布
2022/03/21 日漫
win10电脑老是死机怎么办?win10系统老是死机的解决方法
2022/08/05 数码科技