编程 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 相关文章推荐

style、 currentStyle、 runtimeStyle区别分析

Aug 01 Javascript

详解JavaScript语法对{}处理的坑爹之处

Jun 05 Javascript

Javascript中3种实现继承的方法和代码实例

Aug 12 Javascript

JS实现弹出浮动窗口(支持鼠标拖动和关闭)实例详解

Aug 06 Javascript

jQuery模仿阿里云购买服务器选择购买时间长度的代码

Apr 29 Javascript

PhotoSwipe异步动态加载图片方法

Aug 25 Javascript

jQuery实现遮罩层登录对话框

Dec 29 Javascript

js 函数式编程学习笔记

Mar 25 Javascript

微信小程序数字滚动插件使用详解

Feb 02 Javascript

jQuery实现的两种简单弹窗效果示例

Apr 18 jQuery

vue 项目接口管理的实现

Jan 17 Javascript

原生js+canvas实现贪吃蛇效果

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

实现了一个PHP5的getter/setter基类的代码

2007/02/25 PHP

php的curl实现get和post的代码

2008/08/23 PHP

php判断GIF图片是否为动画的方法

2020/09/04 PHP

JavaScript浏览器选项卡效果

2010/08/25 Javascript

js+JQuery返回顶部功能如何实现

2012/12/03 Javascript

jQuery表单获取和失去焦点输入框提示效果的实例代码

2013/08/01 Javascript

JavaScript实现网页截图功能

2014/10/16 Javascript

jQuery实现列表的全选功能

2015/03/18 Javascript

javascript获取网页宽高方法汇总

2015/07/19 Javascript

移动手机APP手指滑动切换图片特效附源码下载

2015/11/30 Javascript

javascript中JSON.parse()与eval()解析json的区别

2016/05/19 Javascript

全面解析Bootstrap中nav、collapse的使用方法

2016/05/22 Javascript

详解jquery easyui之datagrid使用参考

2016/12/05 Javascript

Vue框架中正确引入JS库的方法介绍

2017/07/30 Javascript

angular $watch 一个变量的变化(实例讲解)

2017/08/02 Javascript

在angular 6中使用 less 的实例代码

2018/05/13 Javascript

在vue中使用SockJS实现webSocket通信的过程

2018/08/29 Javascript

JS 实现微信扫一扫功能

2018/09/14 Javascript

微信小程序时间轴实现方法示例

2019/01/14 Javascript

vue 获取到数据但却渲染不到页面上的解决方法

2020/11/19 Vue.js

python脚本内运行linux命令的方法

2015/07/02 Python

学习python 之编写简单乘法运算题

2016/02/27 Python

Python合并字典键值并去除重复元素的实例

2016/12/18 Python

python下setuptools的安装详解及No module named setuptools的解决方法

2017/07/06 Python

Python实现个人微信号自动监控告警的示例

2019/07/03 Python

python os.path.isfile 的使用误区详解

2019/11/29 Python

重构Python代码的六个实例

2020/11/25 Python

你不知道的5个HTML5新功能

2016/06/28 HTML / CSS

HTML利用九宫格原理进行网页布局

2020/03/13 HTML / CSS

自我评价的正确写法

2013/09/19 职场文书

汽车制造与装配专业自荐信范文

2014/01/02 职场文书

大学生职业生涯规划书范文

2014/01/04 职场文书

个人汇报材料范文

2014/12/30 职场文书

西双版纳导游词

2015/02/03 职场文书

HTML+css盒子模型案例(圆，半圆等)“border-radius” 简单易上手

2021/05/10 HTML / CSS

CSS3实现360度循环旋转功能

2022/02/12 HTML / CSS