javascript判断chrome浏览器的方法


Posted in Javascript onMarch 26, 2014

通过userAgent判断检测一下userAgent返回的字符串里面是否包含“Chrome”, 具体怎么检测是通过indexOf方法进行的。

<script type="text/javascript">
  var isChrome = window.navigator.userAgent.indexOf("Chrome") !== -1;
  alert(isChrome);
  if (isChrome) {
    alert("是Chrome浏览器");
  } else {
    alert("不是Chrome浏览器");
  }
</script>

关于indexOf方法:

indexOf方法返回一个整数值,指出String对象内子字符串的开始位置。即indexOf()括号内所包含的字符在该字符串内的位置,在第几位就返回几,从0开始记数。如果有重复的字符出现,以第一个字符为准。如果没有找到子字符串,则返回 -1。

 JS通过内核判断各种浏览器|区分360与谷歌(亲测可用)

function getBrowserInfo(){
    var ua = navigator.userAgent.toLocaleLowerCase();
    var browserType=null;
    if (ua.match(/msie/) != null || ua.match(/trident/) != null) {
      browserType = "IE";
      browserVersion = ua.match(/msie ([\d.]+)/) != null ? ua.match(/msie ([\d.]+)/)[1] : ua.match(/rv:([\d.]+)/)[1];
    } else if (ua.match(/firefox/) != null) {
      browserType = "火狐";
    }else if (ua.match(/ubrowser/) != null) {
      browserType = "UC";
    }else if (ua.match(/opera/) != null) {
      browserType = "欧朋";
    } else if (ua.match(/bidubrowser/) != null) {
      browserType = "百度";
    }else if (ua.match(/metasr/) != null) {
      browserType = "搜狗";
    }else if (ua.match(/tencenttraveler/) != null || ua.match(/qqbrowse/) != null) {
      browserType = "QQ";
    }else if (ua.match(/maxthon/) != null) {
      browserType = "遨游";
    }else if (ua.match(/chrome/) != null) {
      var is360 = _mime("type", "application/vnd.chromium.remoting-viewer");
      function _mime(option, value) {
        var mimeTypes = navigator.mimeTypes;
        for (var mt in mimeTypes) {
          if (mimeTypes[mt][option] == value) {
            return true;
          }
        }
        return false;
      }
      if(is360){
        browserType = '360';
      }else{
        $('html').css("zoom",".80");
      }
    }else if (ua.match(/safari/) != null) {
      browserType = "Safari";
    }
}

只有原生Chrome中存在一种MimeType“application/vnd.chromium.remoting-viewer”,由此可以判断浏览器是加壳Chrome或是原生Chrome。
再如,只有IE内核的浏览器存在ActiveXObject对象。由此可以判断是否为IE浏览器

判断浏览器类型,我们需要遵循以下原则:

1、采取命中特征原则,当且仅当完全符合区分浏览器的特征时我们才会采用此特征。例如单纯通过UA中MSIE来检测是否为IE浏览器是不可靠的。而通过判断是否存在MimeType“application/vnd.chromium.remoting-viewer”来断言原生Chrome在现阶段来看是可行性,但也不保证永久有效。
2、对于主流浏览器来说一般不存在UserAgent关键字冲突,但对于许多加壳浏览器者就不一定了。再次提出某数字浏览器,userAgent干脆和IE一模一样,但渲染模式等等不不知道动了什么手脚,与标准IE行为差异很大。通过userAgent来判断浏览器时,优先命中浏览器特征字。匹配则基本确定为该浏览器,但未匹配也并不代表不是此浏览器。请悉知。
3、优先使用浏览器特性来区分浏览器,因为这个准确性较高。其次再采用userAgent辅助判断,从而达到最高的匹配度。
4、优先检测第三方加壳浏览器,目前并未有十分好的方案,只能枚举大部分世面上存在并可以判断的浏览器,其他未匹配任何规则的浏览器,为了兼容,请将规则落到四大浏览器之一。
5、判断浏览器版本,仅仅是为了针对特定浏览器进行优化,需要有特定的业务场景需要才要这么做。或者当某个浏览器出现兼容问题时,紧急添加针对浏览器的补丁代码时才判断。更加科学稳妥的办法是使用标准的JS函数和API,页面元素和样式设计遵循W3C标准。可能存在争议的兼容性问题尽可能采用第三方框架如jQuery。这才是解决兼容性问题的根本。
下面附上最近整理规纳判断浏览器类型的代码

Javascript 相关文章推荐
My Desktop :) 桌面式代码
Dec 29 Javascript
js中更短的 Array 类型转换
Oct 30 Javascript
前台js调用后台方法示例
Dec 02 Javascript
在javascript中随机数 math random如何生成指定范围数值的随机数
Oct 21 Javascript
jQuery Mobile开发中日期插件Mobiscroll使用说明
Mar 02 Javascript
js贪吃蛇游戏实现思路和源码
Apr 14 Javascript
全面了解javascript中的错误处理机制
Jul 18 Javascript
Angular的自定义指令以及实例
Dec 26 Javascript
使用vue.js2.0 + ElementUI开发后台管理系统详细教程(二)
Jan 21 Javascript
Three.js实现浏览器变动时进行自适应的方法
Sep 26 Javascript
jQuery使用$.extend(true,object1, object2);实现深拷贝对象的方法分析
Mar 06 jQuery
vue操作dom元素的3种方法示例
Sep 20 Javascript
Javascript 浮点运算精度问题分析与解决
Mar 26 #Javascript
javascript 3d 逐侦产品展示(核心精简)
Mar 26 #Javascript
Node.js模拟浏览器文件上传示例
Mar 26 #Javascript
JavaScript关闭当前页面(窗口)不带任何提示
Mar 26 #Javascript
JavaScript数字和字符串转换示例
Mar 26 #Javascript
jquery实现瀑布流效果分享
Mar 26 #Javascript
jquery实现效果比较好的table选中行颜色
Mar 25 #Javascript
You might like
php 日期和时间的处理-郑阿奇(续)
2011/07/04 PHP
Symfony2学习笔记之插件格式分析
2016/03/17 PHP
thinkphp3.x中session方法的用法分析
2016/05/20 PHP
php结合md5的加密解密算法实例
2016/09/30 PHP
javascript数组快速打乱重排的方法
2014/01/02 Javascript
用Jquery实现滚动新闻
2014/02/12 Javascript
如何设置一定时间内只能发送一次请求
2014/02/28 Javascript
jQuery源码解读之hasClass()方法分析
2015/02/20 Javascript
jquery实现鼠标拖拽滑动效果来选择数字的方法
2015/05/04 Javascript
jQuery+CSS3实现四种应用广泛的导航条制作实例详解
2016/09/17 Javascript
浅谈html转义及防止javascript注入攻击的方法
2016/12/04 Javascript
详解jQuery选择器
2016/12/21 Javascript
AngularJS+bootstrap实现动态选择商品功能示例
2017/05/17 Javascript
利用纯JS实现像素逐渐显示的方法示例
2017/08/14 Javascript
用nodejs实现json和jsonp服务的方法
2017/08/25 NodeJs
ES6 javascript中class类的get与set用法实例分析
2017/10/30 Javascript
深入理解JavaScript和TypeScript中的class
2018/04/22 Javascript
JavaScript this绑定过程深入详解
2018/12/07 Javascript
Python语言实现获取主机名根据端口杀死进程
2016/03/31 Python
Python输出各行命令详解
2018/02/01 Python
python线程信号量semaphore使用解析
2019/11/30 Python
python使用turtle库绘制奥运五环
2020/02/24 Python
python matplotlib:plt.scatter() 大小和颜色参数详解
2020/04/14 Python
keras.utils.to_categorical和one hot格式解析
2020/07/02 Python
Python排序函数的使用方法详解
2020/12/11 Python
Shopty西班牙:缝纫机在线销售
2018/01/26 全球购物
宝拉珍选官方旗舰店:2%水杨酸精华液,收缩毛孔粗大和祛痘
2018/07/01 全球购物
波兰灯具、照明和LED购物网站:Lampy.pl
2019/03/11 全球购物
AssertionError 跟一下那个类是 “is – a”的关系
2012/02/21 面试题
大型会议接待方案
2014/03/01 职场文书
专题民主生活会对照检查材料思想汇报
2014/09/29 职场文书
优秀教研组申报材料
2014/12/26 职场文书
写给女朋友的检讨书
2015/05/06 职场文书
python实现自动清理文件夹旧文件
2021/05/10 Python
Java Spring Lifecycle的使用
2022/05/06 Java/Android
前端canvas中物体边框和控制点的实现示例
2022/08/05 Javascript