编程 Javascript

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判断当前浏览器的实现代码

- Author -

mdxy-dxy

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

JavaScript内核之基本概念

Oct 21 Javascript

JQUERY实现左侧TIPS滑进滑出效果示例

Jun 27 Javascript

jQuery实现个性翻牌效果导航菜单的方法

Mar 09 Javascript

jQuery中 prop() attr()使用详解

May 19 Javascript

学习JavaScript设计模式(单例模式)

Nov 26 Javascript

JS排序方法（sort，bubble，select，insert）代码汇总

Jan 30 Javascript

JavaScript获取IP获取的是IPV6 如何校验

Jun 12 Javascript

jQuery实现的跨容器无缝拖动效果代码

Jun 21 Javascript

jQuery 遍历map()方法详解

Nov 04 Javascript

BootStrap表单验证实例代码

Jan 13 Javascript

详解VUE2.X过滤器的使用方法

Jan 11 Javascript

JS中的算法与数据结构之栈(Stack)实例详解

Aug 20 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

Cannot modify header information错误解决方法

2008/10/08 PHP

国外比较好的几个的Php开源建站平台小结

2010/04/22 PHP

PHP PDO fetch 模式各种参数的输出结果一览

2015/01/07 PHP

非常有用的9个PHP代码片段

2016/04/06 PHP

php中static和const关键字用法分析

2016/12/07 PHP

Yii2框架实现登录、退出及自动登录功能的方法详解

2017/10/24 PHP

PHP如何通过date() 函数格式化显示时间

2020/11/13 PHP

Cookie 注入是怎样产生的

2009/04/08 Javascript

通过身份证号得到出生日期和性别的js代码

2009/11/23 Javascript

javascript 跨浏览器开发经验总结（五） js 事件

2010/05/19 Javascript

js 创建书签小工具之理论

2011/02/25 Javascript

JS动态修改图片的URL（src）的方法

2015/04/01 Javascript

javascript中的3种继承实现方法

2016/01/27 Javascript

javascript禁止超链接跳转的方法

2016/02/02 Javascript

nodejs 图片预览和上传的示例代码

2017/09/30 NodeJs

原生JS实现轮播图效果

2018/10/12 Javascript

如何利用ES6进行Promise封装总结

2019/02/11 Javascript

element-ui组件table实现自定义筛选功能的示例代码

2019/03/15 Javascript

js 实现ajax发送步骤过程详解

2019/07/25 Javascript

详解Vue数据驱动原理

2020/11/17 Javascript

python实现根据ip地址反向查找主机名称的方法

2015/04/29 Python

python+tkinter编写电脑桌面放大镜程序实例代码

2018/01/16 Python

Python 查看文件的读写权限方法

2018/01/23 Python

对python中使用requests模块参数编码的不同处理方法

2018/05/18 Python

python如果快速判断数字奇数偶数

2019/11/13 Python

Python3 字典dictionary入门基础附实例

2020/02/10 Python

如何用Python编写一个电子考勤系统

2021/02/08 Python

澳大利亚女装精品店：Alannah Hill

2020/07/29 全球购物

ruby如何进行集成操作？Ruby能进行多重继承吗？

2013/10/16 面试题

文明倡议书范文

2014/04/15 职场文书

《陈毅探母》教学反思

2014/05/01 职场文书

上班时间打瞌睡检讨书

2014/09/26 职场文书

授权收款委托书范本

2014/10/10 职场文书

2015暑假社会调查报告

2015/07/13 职场文书

2016应届毕业生自荐信范文

2016/01/28 职场文书

openstack中的rpc远程调用的方法

2021/07/09 Python