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 相关文章推荐
jquery1.5.1中根据元素ID获取元素对象的代码
Apr 02 Javascript
Javascript图像处理—平滑处理实现原理
Dec 28 Javascript
自己动手实现jQuery Callbacks完整功能代码详解
Nov 25 Javascript
用AngularJS的指令实现tabs切换效果
Aug 31 Javascript
微信开发 消息推送实现代码
Oct 21 Javascript
canvas实现粒子时钟效果
Feb 06 Javascript
如何理解jQuery中的ajaxSubmit方法
Mar 13 Javascript
使用axios实现上传图片进度条功能
Dec 21 Javascript
优雅的在React项目中使用Redux的方法
Nov 10 Javascript
uni-app如何实现增量更新功能
Jan 03 Javascript
浅谈vue单页面中有多个echarts图表时的公用代码写法
Jul 19 Javascript
vue+django实现下载文件的示例
Mar 24 Vue.js
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初学者常见问题集合 修正版(21问答)
2010/03/23 PHP
Windows2003下php5.4安装配置教程(Apache2.4)
2016/06/30 PHP
关于php开启错误提示的总结
2019/09/24 PHP
关于Anemometer图形化显示MySQL慢日志的工具搭建及使用的详细介绍
2020/07/13 PHP
从父页面读取和操作iframe中内容方法
2009/07/25 Javascript
JavaScript的类型转换(字符转数字 数字转字符)
2010/08/30 Javascript
JS 操作符整理[推荐收藏]
2011/11/15 Javascript
JavaScript 高级篇之闭包、模拟类,继承(五)
2012/04/07 Javascript
JS文字球状放大效果代码分享
2015/08/19 Javascript
全面解析bootstrap格子布局
2016/05/22 Javascript
第一篇初识bootstrap
2016/06/21 Javascript
JavaScript使用Ajax上传文件的示例代码
2017/08/10 Javascript
layui radio性别单选框赋值方法
2018/08/15 Javascript
在vue项目中引入highcharts图表的方法
2019/01/21 Javascript
用node.js写一个jenkins发版脚本
2019/05/21 Javascript
js+canvas实现简单扫雷小游戏
2021/01/22 Javascript
vue 动态生成拓扑图的示例
2021/01/03 Vue.js
Python通过websocket与js客户端通信示例分析
2014/06/25 Python
python单例模式实例分析
2015/04/08 Python
Python对数据库操作
2016/03/28 Python
python中实现延时回调普通函数示例代码
2017/09/08 Python
python代码 FTP备份交换机配置脚本实例解析
2019/08/01 Python
pytorch 归一化与反归一化实例
2019/12/31 Python
一文详述 Python 中的 property 语法
2020/09/01 Python
amazeui页面校验功能的实现代码
2020/08/24 HTML / CSS
美国二手奢侈品寄售网站:TheRealReal
2016/10/29 全球购物
神路信息Java面试题目
2013/03/31 面试题
linux面试题参考答案(8)
2015/08/11 面试题
幼儿园教师国培感言
2014/02/02 职场文书
活动总结模板
2014/05/09 职场文书
最美乡村医生事迹材料
2014/06/02 职场文书
综艺节目策划方案
2014/06/13 职场文书
学校政风行风整改方案
2014/10/25 职场文书
《天使的翅膀》读后感3篇
2019/12/20 职场文书
详解Laravel制作API接口
2021/05/31 PHP
详解ZABBIX监控ESXI主机的问题
2022/06/21 Servers