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 相关文章推荐
jQuery的12招常用技巧分享
Aug 08 Javascript
node.js适合游戏后台开发吗?
Sep 03 Javascript
js如何准确获取当前页面url网址信息
Sep 13 Javascript
angular route中使用resolve在uglify压缩后问题解决
Sep 21 Javascript
JavaScript实现邮箱地址自动匹配功能代码
Nov 28 Javascript
Bootstrap modal 多弹窗之叠加关闭阴影遮罩问题的解决方法
Feb 27 Javascript
JS实现简单的天数计算器完整实例
Apr 28 Javascript
javascript 中iframe高度自适应(同域)实例详解
May 16 Javascript
详解从买域名到使用pm2部署node.js项目全过程
Mar 07 Javascript
layer.js open 隐藏滚动条的例子
Sep 05 Javascript
jQuery实现的图片点击放大缩小功能案例
Jan 02 jQuery
Js Snowflake(雪花算法)生成随机ID的实现方法
Aug 26 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
关于Laravel Route重定向的一个注意点
2017/01/16 PHP
PHP微信PC二维码登陆的实现思路
2017/07/13 PHP
php实现在线考试系统【附源码】
2018/09/18 PHP
JavaScript表单常用验证集合
2008/01/16 Javascript
js使用栈来实现10进制转8进制与取除数及余数
2014/06/11 Javascript
javaScript实现滚动新闻的方法
2015/07/30 Javascript
Javascript控制div属性动态变化实例分析
2015/10/08 Javascript
json与jsonp知识小结(推荐)
2016/08/16 Javascript
微信小程序开发教程-手势解锁实例
2017/01/06 Javascript
Javascript中构造函数要注意的一些坑
2017/01/23 Javascript
基于JavaScript实现百度搜索框效果
2020/06/28 Javascript
Vue+ElementUI实现表单动态渲染、可视化配置的方法
2018/03/07 Javascript
Vue封装一个简单轻量的上传文件组件的示例
2018/03/21 Javascript
Vue filter介绍及详细使用
2018/04/04 Javascript
微信小程序实现上传图片功能
2018/05/28 Javascript
使用apifm-wxapi快速开发小程序过程详解
2019/08/05 Javascript
Vue实现返回顶部按钮实例代码
2020/10/21 Javascript
Node.js中的异步生成器与异步迭代详解
2021/01/31 Javascript
[01:50]WODOTA制作 DOTA2中文宣传片《HERO》
2013/04/28 DOTA
[01:11:46]DOTA2-DPC中国联赛 正赛 iG vs Magma BO3 第一场 2月23日
2021/03/11 DOTA
详解python上传文件和字符到PHP服务器
2017/11/24 Python
python实现随机梯度下降法
2020/03/24 Python
Python设计模式之状态模式原理与用法详解
2019/01/15 Python
Python 实现自动导入缺失的库
2019/10/29 Python
使用pth文件添加Python环境变量方式
2020/05/26 Python
python中if及if-else如何使用
2020/06/02 Python
python正则表达式的懒惰匹配和贪婪匹配说明
2020/07/13 Python
Python collections.deque双边队列原理详解
2020/10/05 Python
英国领先的珍珠首饰品牌:Orchira
2016/09/11 全球购物
农民致富事迹材料
2014/01/23 职场文书
医学生自我评价
2014/01/27 职场文书
创建精神文明单位实施方案
2014/03/08 职场文书
俞敏洪一分钟演讲稿
2014/08/26 职场文书
师德先进个人事迹材料
2014/12/19 职场文书
建筑工程材料员岗位职责
2015/04/11 职场文书
golang连接MySQl使用sqlx库
2022/04/14 Golang