编程 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 单例/单体模式(Singleton)

Apr 07 Javascript

js中的caller和callee属性介绍和例子

Jun 07 Javascript

JQuery radio（单选按钮）操作方法汇总

Apr 15 Javascript

jQuery如何使用自动触发事件trigger

Nov 29 Javascript

JS中使用mailto实现将用户在网页中输入的内容传递到本地邮件客户端

Oct 08 Javascript

js实现简单的获取验证码按钮效果

Mar 03 Javascript

使用 Node.js 开发资讯爬虫流程

Jan 07 Javascript

layui radio点击事件实现input显示和隐藏的例子

Sep 02 Javascript

layer.open弹层查看缩略图的原图,自适应大小的实例

Sep 05 Javascript

jquery实现上传文件进度条

Mar 26 jQuery

让Vue响应Map或Set的变化操作

Nov 11 Javascript

基于VUE实现简单的学生信息管理系统

Jan 13 Vue.js

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

第十一节重载 [11]

2006/10/09 PHP

PHP实现的mysql读写分离操作示例

2018/05/22 PHP

PHP 多进程与信号中断实现多任务常驻内存管理实例方法

2019/10/04 PHP

PHP中通过getopt解析GNU C风格命令行选项

2019/11/18 PHP

Jquery提交表单 Form.js官方插件介绍

2012/03/01 Javascript

以JSON形式将JS中Array对象数组传至后台的方法

2014/01/06 Javascript

JQuery插件jcarousellite的参数中文说明

2015/05/11 Javascript

jQuery判断指定id的对象是否存在的方法

2015/05/22 Javascript

bootstrap提示标签、提示框实现代码

2016/12/28 Javascript

AngularJS 异步解决实现方法

2017/06/12 Javascript

微信小程序页面滑动事件的实例详解

2017/10/12 Javascript

JavaScript登录验证基础教程

2017/11/01 Javascript

Node.js静态服务器的实现方法

2018/02/28 Javascript

让Vue也可以使用Redux的方法

2018/05/23 Javascript

vue项目搭建以及全家桶的使用详细教程(小结)

2018/12/19 Javascript

让Vue响应Map或Set的变化操作

2020/11/11 Javascript

理解python多线程（python多线程简明教程）

2014/06/09 Python

CentOS 7下安装Python3.6 及遇到的问题小结

2018/11/08 Python

对Python信号处理模块signal详解

2019/01/09 Python

实例详解Matlab 与 Python 的区别

2019/04/26 Python

使用python制作游戏下载进度条的代码（程序说明见注释）

2019/10/24 Python

Django接收照片储存文件的实例代码

2020/03/07 Python

Python异常原理及异常捕捉实现过程解析

2020/03/25 Python

Python SMTP配置参数并发送邮件

2020/06/16 Python

python数据类型强制转换实例详解

2020/06/22 Python

python中常用的数据结构介绍

2021/01/12 Python

分享一个页面平滑滚动小技巧(推荐)

2019/10/23 HTML / CSS

美国求婚钻戒网站：Super Jeweler

2016/08/27 全球购物

医学院学生的自我评价分享

2013/11/19 职场文书

给儿子的表扬信

2014/01/15 职场文书

2014新年寄语

2014/01/20 职场文书

公司面试感谢信

2014/02/01 职场文书

《改造我们的学习》心得体会

2014/11/07 职场文书

2014年公司工作总结

2014/11/22 职场文书

python制作图形界面的2048游戏, 基于tkinter

2021/04/06 Python

golang操作redis的客户端包有多个比如redigo、go-redis

2022/04/14 Golang