jquery判断当前浏览器的实现代码


Posted in Javascript onNovember 07, 2015

写了一个判断当前浏览器类型及版本的方法,只在IE 8/11 、谷歌 、360 浏览器(不完全)上测试过,需要用到jquery

核心代码:

;(function($, window, document,undefined){
  if(!window.browser){
     
    var userAgent = navigator.userAgent.toLowerCase(),uaMatch;
    window.browser = {}
     
    /**
     * 判断是否为ie
     */
    function isIE(){
      return ("ActiveXObject" in window);
    }
    /**
     * 判断是否为谷歌浏览器
     */
    if(!uaMatch){
      uaMatch = userAgent.match(/chrome\/([\d.]+)/);
      if(uaMatch!=null){
        window.browser['name'] = 'chrome';
        window.browser['version'] = uaMatch[1];
      }
    }
    /**
     * 判断是否为火狐浏览器
     */
    if(!uaMatch){
      uaMatch = userAgent.match(/firefox\/([\d.]+)/);
      if(uaMatch!=null){
        window.browser['name'] = 'firefox';
        window.browser['version'] = uaMatch[1];
      }
    }
    /**
     * 判断是否为opera浏览器
     */
    if(!uaMatch){
      uaMatch = userAgent.match(/opera.([\d.]+)/);
      if(uaMatch!=null){
        window.browser['name'] = 'opera';
        window.browser['version'] = uaMatch[1];
      }
    }
    /**
     * 判断是否为Safari浏览器
     */
    if(!uaMatch){
      uaMatch = userAgent.match(/safari\/([\d.]+)/);
      if(uaMatch!=null){
        window.browser['name'] = 'safari';
        window.browser['version'] = uaMatch[1];
      }
    }
    /**
     * 最后判断是否为IE
     */
    if(!uaMatch){
      if(userAgent.match(/msie ([\d.]+)/)!=null){
        uaMatch = userAgent.match(/msie ([\d.]+)/);
        window.browser['name'] = 'ie';
        window.browser['version'] = uaMatch[1];
      }else{
        /**
         * IE10
         */
        if(isIE() && !!document.attachEvent && (function(){"use strict";return !this;}())){
          window.browser['name'] = 'ie';
          window.browser['version'] = '10';
        }
        /**
         * IE11
         */
        if(isIE() && !document.attachEvent){
          window.browser['name'] = 'ie';
          window.browser['version'] = '11';
        }
      }
    }
 
    /**
     * 注册判断方法
     */
    if(!$.isIE){
      $.extend({
        isIE:function(){
          return (window.browser.name == 'ie');
        }
      });
    }
    if(!$.isChrome){
      $.extend({
        isChrome:function(){
          return (window.browser.name == 'chrome');
        }
      });
    }
    if(!$.isFirefox){
      $.extend({
        isFirefox:function(){
          return (window.browser.name == 'firefox');
        }
      });
    }
    if(!$.isOpera){
      $.extend({
        isOpera:function(){
          return (window.browser.name == 'opera');
        }
      });
    }
    if(!$.isSafari){
      $.extend({
        isSafari:function(){
          return (window.browser.name == 'safari');
        }
      });
    }
  }
})(jQuery, window, document);

使用方法:

//使用方式
console.log(window.browser);
console.log($.isIE());
console.log($.isChrome());

三水点靠木小编特提供的完整测试代码:

<html> 
<head> 
<title>jquery 浏览器判断</title> 
</head> 
<body> 
<script src="http://demo.3water.com/jslib/jquery/jquery-1.8.3.min.js"></script>
<script type="text/javascript"> 
(function($, window, document,undefined){
  if(!window.browser){
     
    var userAgent = navigator.userAgent.toLowerCase(),uaMatch;
    window.browser = {}
     
    /**
     * 判断是否为ie
     */
    function isIE(){
      return ("ActiveXObject" in window);
    }
    /**
     * 判断是否为谷歌浏览器
     */
    if(!uaMatch){
      uaMatch = userAgent.match(/chrome\/([\d.]+)/);
      if(uaMatch!=null){
        window.browser['name'] = 'chrome';
        window.browser['version'] = uaMatch[1];
      }
    }
    /**
     * 判断是否为火狐浏览器
     */
    if(!uaMatch){
      uaMatch = userAgent.match(/firefox\/([\d.]+)/);
      if(uaMatch!=null){
        window.browser['name'] = 'firefox';
        window.browser['version'] = uaMatch[1];
      }
    }
    /**
     * 判断是否为opera浏览器
     */
    if(!uaMatch){
      uaMatch = userAgent.match(/opera.([\d.]+)/);
      if(uaMatch!=null){
        window.browser['name'] = 'opera';
        window.browser['version'] = uaMatch[1];
      }
    }
    /**
     * 判断是否为Safari浏览器
     */
    if(!uaMatch){
      uaMatch = userAgent.match(/safari\/([\d.]+)/);
      if(uaMatch!=null){
        window.browser['name'] = 'safari';
        window.browser['version'] = uaMatch[1];
      }
    }
    /**
     * 最后判断是否为IE
     */
    if(!uaMatch){
      if(userAgent.match(/msie ([\d.]+)/)!=null){
        uaMatch = userAgent.match(/msie ([\d.]+)/);
        window.browser['name'] = 'ie';
        window.browser['version'] = uaMatch[1];
      }else{
        /**
         * IE10
         */
        if(isIE() && !!document.attachEvent && (function(){"use strict";return !this;}())){
          window.browser['name'] = 'ie';
          window.browser['version'] = '10';
        }
        /**
         * IE11
         */
        if(isIE() && !document.attachEvent){
          window.browser['name'] = 'ie';
          window.browser['version'] = '11';
        }
      }
    }
 
    /**
     * 注册判断方法
     */
    if(!$.isIE){
      $.extend({
        isIE:function(){
          return (window.browser.name == 'ie');
        }
      });
    }
    if(!$.isChrome){
      $.extend({
        isChrome:function(){
          return (window.browser.name == 'chrome');
        }
      });
    }
    if(!$.isFirefox){
      $.extend({
        isFirefox:function(){
          return (window.browser.name == 'firefox');
        }
      });
    }
    if(!$.isOpera){
      $.extend({
        isOpera:function(){
          return (window.browser.name == 'opera');
        }
      });
    }
    if(!$.isSafari){
      $.extend({
        isSafari:function(){
          return (window.browser.name == 'safari');
        }
      });
    }
  }
})(jQuery, window, document);
//使用方式
alert(window.browser.name);
//下面是ie F2中测试可以看到效果
console.log(window.browser);
console.log($.isIE());
console.log($.isChrome());
</script> 
</body> 
</html>

jquery判断当前浏览器的实现代码

Javascript 相关文章推荐
对google个性主页的拖拽效果的js的完整注释[转]
Apr 10 Javascript
JavaScript入门教程(12) js对象化编程
Jan 31 Javascript
利用javascript实现一些常用软件的下载导航
Aug 03 Javascript
jquery1.4 教程二 ajax方法的改进
Feb 25 Javascript
JavaScript加强之自定义callback示例
Sep 21 Javascript
JavaScript实现弹出子窗口并传值给父窗口
Dec 18 Javascript
AngularJs 60分钟入门基础教程
Apr 03 Javascript
jQuery实现导航回弹效果
Feb 27 Javascript
使用AngularJS编写多选按钮选中时触发指定方法的指令代码详解
Jul 24 Javascript
解决jquery有正确返回值但不执行success函数的问题
Aug 20 jQuery
Vue 递归多级菜单的实例代码
May 05 Javascript
微信小程序基于ColorUI构建皮皮虾短视频去水印组件
Nov 04 Javascript
jQuery插件开发精品教程(让你的jQuery更上一个台阶)
Nov 07 #Javascript
js识别uc浏览器的代码
Nov 06 #Javascript
详解javascript数组去重问题
Nov 06 #Javascript
基于JavaScript实现仿京东图片轮播效果
Nov 06 #Javascript
实现非常简单的js双向数据绑定
Nov 06 #Javascript
浅析javascript中的事件代理
Nov 06 #Javascript
详解javascript中的事件处理
Nov 06 #Javascript
You might like
php fputcsv命令 写csv文件遇到的小问题(多维数组连接符)
2011/05/24 PHP
PHP改进计算字符串相似度的函数similar_text()、levenshtein()
2014/10/27 PHP
10款实用的PHP开源工具
2015/10/23 PHP
yii,CI,yaf框架+smarty模板使用方法
2015/12/29 PHP
PHP模板引擎Smarty中的保留变量用法分析
2016/04/11 PHP
PHP中的访问修饰符简单比较
2019/02/02 PHP
jQuery.autocomplete 支持中文输入(firefox)修正方法
2011/03/10 Javascript
用javascript关闭本窗口技巧小结
2014/09/05 Javascript
jQuery选择器源码解读(一):Sizzle方法
2015/03/31 Javascript
JavaScript之Object类型介绍
2015/04/01 Javascript
第六章之辅组类与响应式工具
2016/04/25 Javascript
jQuery滚动新闻实现代码
2016/06/26 Javascript
JS获取input file绝对路径的方法(推荐)
2016/08/02 Javascript
微信小程序实现轮播图效果
2017/09/07 Javascript
jQuery中ajax获取数据赋值给页面的实例
2017/12/31 jQuery
关于vue中 $emit的用法详解
2018/04/12 Javascript
基于Vue实现电商SKU组合算法问题
2019/05/29 Javascript
JavaScript onclick事件使用方法详解
2020/05/15 Javascript
python实现提取百度搜索结果的方法
2015/05/19 Python
Python的Django框架中settings文件的部署建议
2015/05/30 Python
Python cookbook(数据结构与算法)实现对不原生支持比较操作的对象排序算法示例
2018/03/15 Python
浅谈python函数调用返回两个或多个变量的方法
2019/01/23 Python
Python 获取命令行参数内容及参数个数的实例
2019/12/20 Python
python实现将列表中各个值快速赋值给多个变量
2020/04/02 Python
python中sympy库求常微分方程的用法
2020/04/28 Python
pycharm 对代码做静态检查操作
2020/06/09 Python
Django-celery-beat动态添加周期性任务实现过程解析
2020/11/26 Python
class类在python中获取金融数据的实例方法
2020/12/10 Python
HTML5语音识别标签写法附图
2013/11/18 HTML / CSS
美国第二大团购网站:LivingSocial
2016/07/24 全球购物
北美三大旅游网站之一:Travelocity加拿大
2016/08/20 全球购物
小学家长会邀请函
2014/01/23 职场文书
机关党建工作汇报材料
2014/08/20 职场文书
委托培训协议书
2014/11/17 职场文书
浅谈mysql执行过程以及顺序
2021/05/12 MySQL
剑指Offer之Java算法习题精讲二叉树的构造和遍历
2022/03/21 Java/Android