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 相关文章推荐
jQuery弹出层插件简化版代码下载
Oct 16 Javascript
javascript复制对象使用说明
Jun 28 Javascript
Css3制作变形与动画效果
Jul 24 Javascript
js实现prototype扩展的方法(字符串,日期,数组扩展)
Jan 14 Javascript
深入研究jQuery图片懒加载 lazyload.js使用方法
Aug 16 jQuery
JS将网址url转化为JSON格式的方法
Jul 02 Javascript
JSONP原理及应用实例详解
Sep 13 Javascript
基于Three.js实现360度全景图片
Dec 30 Javascript
基于Bootstrap和JQuery实现动态打开和关闭tab页的实例代码
Jun 10 jQuery
vue中datepicker的使用教程实例代码详解
Jul 08 Javascript
npm qs模块使用详解
Feb 07 Javascript
react使用antd表单赋值,用于修改弹框的操作
Oct 29 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数组传递是值传递而非引用传递概念纠正
2013/01/31 PHP
基于PHP 面向对象之成员方法详解
2013/05/04 PHP
php获取用户真实IP和防刷机制的实例代码
2018/11/28 PHP
PHP常用函数之格式化时间操作示例
2019/10/21 PHP
gearman中worker常驻后台,导致MySQL server has gone away的解决方法
2020/02/27 PHP
SWFObject Flash js调用类
2008/07/08 Javascript
javascript写的日历类(基于pj)
2010/12/28 Javascript
javascript修改IMG标签的src问题
2014/03/28 Javascript
Javascript核心读书有感之表达式和运算符
2015/02/11 Javascript
Javascript中神奇的this
2016/01/20 Javascript
JavaScript知识点总结(四)之逻辑OR运算符详解
2016/05/31 Javascript
jQuery实现简单的网页换肤效果示例
2016/09/18 Javascript
Bootstrap Modal对话框如何在关闭时触发事件
2016/12/02 Javascript
js用类封装pop弹窗组件
2017/10/08 Javascript
微信小程序实现动态设置页面标题的方法【附源码下载】
2017/11/29 Javascript
npm 更改默认全局路径以及国内镜像的方法
2018/05/16 Javascript
webpack4之如何编写loader的方法步骤
2019/06/06 Javascript
Nodejs 微信小程序消息推送的实现
2021/01/20 NodeJs
python 提取文件的小程序
2009/07/29 Python
Python爬取国外天气预报网站的方法
2015/07/10 Python
Python 模板引擎的注入问题分析
2017/01/01 Python
python数字图像处理之高级滤波代码详解
2017/11/23 Python
Django Rest framework认证组件详细用法
2019/07/25 Python
世界最大域名注册商:GoDaddy
2016/07/24 全球购物
Hotels.com加拿大:领先的在线住宿网站
2018/10/05 全球购物
Linux如何修改文件和文件夹的权限
2012/06/27 面试题
EJB timer的种类
2014/10/28 面试题
上课玩手机检讨书
2014/02/08 职场文书
检查接待方案
2014/02/27 职场文书
预防传染病方案
2014/06/14 职场文书
离婚协议书范本(2014版)
2014/09/28 职场文书
采购员岗位职责范本
2015/04/07 职场文书
2015年挂职干部工作总结
2015/05/14 职场文书
《只有一个地球》教学反思
2016/02/16 职场文书
Python jiaba库的使用详解
2021/11/23 Python
阿里云国际版 使用Nginx作为HTTPS转发代理服务器
2022/05/11 Servers