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

js获取控件位置以及不同浏览器中的差别介绍

Aug 08 Javascript

jquery组件使用中遇到的问题整理及解决

Feb 21 Javascript

jQuery中queue()方法用法实例

Dec 29 Javascript

javascript超过容器后显示省略号效果的方法(兼容一行或者多行)

Jul 14 Javascript

原生JS取代一些JQuery方法的简单实现

Sep 20 Javascript

一种angular的方法级的缓存注解（装饰器）

Mar 13 Javascript

在vue项目中优雅的使用SVG的方法实例详解

Dec 03 Javascript

babel7.x和webpack4.x配置vue项目的方法步骤

May 12 Javascript

基于 vue-skeleton-webpack-plugin 的骨架屏实战

Aug 05 Javascript

angularjs1.X 重构controller 的方法小结

Aug 15 Javascript

vue页面跳转实现页面缓存操作

Jul 22 Javascript

JS前端使用canvas实现物体的点选示例

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

在“咖啡之国”感受咖啡文化

2021/03/03 咖啡文化

PHP命名空间和自动加载类

2016/04/03 PHP

PHP预定义变量9大超全局数组用法详解

2016/04/23 PHP

PHP调试及性能分析工具Xdebug详解

2017/02/09 PHP

PHP设计模式之原型模式定义与用法详解

2018/04/03 PHP

PHP解决高并发的优化方案实例

2020/12/10 PHP

ExtJS 2.0实用简明教程之ExtJS版的Hello

2009/04/29 Javascript

Javascript的构造函数和constructor属性

2010/01/09 Javascript

Pro JavaScript Techniques学习笔记

2010/12/28 Javascript

JavaScript中链式调用之研习

2011/04/07 Javascript

node.js实现BigPipe详解

2014/12/05 Javascript

jquery实现select选择框内容左右移动代码分享

2015/11/21 Javascript

javascript实现起伏的水波背景效果

2016/05/16 Javascript

js控住DOM实现发布微博效果

2016/08/30 Javascript

jQuery动态创建元素以及追加节点的实现方法

2016/10/20 Javascript

深入理解JavaScript中的for循环

2017/02/07 Javascript

nodejs微信开发之接入指南

2019/03/17 NodeJs

JavaScript实现指定数量的并发限制的示例代码

2020/03/10 Javascript

jquery实现拖拽添加元素功能

2020/12/01 jQuery

[01:13]这，就是刀塔

2014/07/16 DOTA

python通过伪装头部数据抵抗反爬虫的实例

2018/05/07 Python

keras Lambda自定义层实现数据的切片方式,Lambda传参数

2020/06/11 Python

12个不为大家熟知的HTML5设计小技巧

2016/06/02 HTML / CSS

基于Html5 canvas实现裁剪图片和马赛克功能及又拍云上传图片功能

2019/07/09 HTML / CSS

Roxy美国官网：澳大利亚冲浪、滑雪健身品牌

2016/07/30 全球购物

美国首屈一指的礼品篮供应商：GiftTree

2018/01/06 全球购物

德国运动营养和健身网上商店：Myprotein.de

2018/07/18 全球购物

iKRIX意大利网上商店：男女豪华服装和配件

2019/10/09 全球购物

商场中秋节活动方案

2014/02/07 职场文书

财务总监岗位职责

2014/03/07 职场文书

机械工程及自动化专业求职信

2014/09/03 职场文书

2014年保洁员工作总结

2014/11/19 职场文书

离婚案件被告代理词

2015/05/23 职场文书

复兴之路展览观后感

2015/06/02 职场文书

垂直极限观后感

2015/06/08 职场文书

七年级作文之下雨天

2019/12/23 职场文书