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 相关文章推荐
限制textbox或textarea输入字符长度的JS代码
Oct 16 Javascript
javascript trim函数在IE下不能用的解决方法
Sep 12 Javascript
vue组件name的作用小结
May 23 Javascript
webpack项目轻松混用css module的方法
Jun 12 Javascript
Vue中$refs的用法详解
Jun 24 Javascript
详谈js的变量提升以及使用方法
Oct 06 Javascript
Electron vue的使用教程图文详解
Jul 05 Javascript
微信小程序开发摇一摇功能
Nov 22 Javascript
Vue的data、computed、watch源码浅谈
Apr 04 Javascript
基于Echarts图表在div动态切换时不显示的解决方式
Jul 20 Javascript
vue select 获取value和lable操作
Aug 28 Javascript
Vue监视数据的原理详解
Feb 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魔法函数与魔法常量使用介绍
2017/07/23 PHP
PHP操作路由器实现方法示例
2019/04/27 PHP
Laravel 自定命令以及生成文件的例子
2019/10/23 PHP
Lazy Load 延迟加载图片的 jQuery 插件
2010/02/06 Javascript
jQuery操作input type=radio的实现代码
2012/06/14 Javascript
基于js disabled=&quot;false&quot;不起作用的解决办法
2013/06/26 Javascript
js 获取时间间隔实现代码
2014/05/12 Javascript
jQuery 和 CSS 的文本特效插件集锦
2014/12/12 Javascript
jquery实现最简单的滑动菜单效果代码
2015/09/12 Javascript
JavaScript的设计模式经典之代理模式
2016/02/24 Javascript
JQuery Ajax 异步操作之动态添加节点功能
2017/05/24 jQuery
使用npm安装最新版本nodejs
2018/01/18 NodeJs
JS实现自定义弹窗功能
2018/08/08 Javascript
基于游标的分页接口实现代码示例
2018/11/12 Javascript
javascript中floor使用方法总结
2019/02/02 Javascript
JS+canvas画布实现炫酷的旋转星空效果示例
2019/02/13 Javascript
Vue2.0+Vux搭建一个完整的移动webApp项目的示例
2019/03/19 Javascript
Vue 实现登录界面验证码功能
2020/01/03 Javascript
Python splitlines使用技巧
2008/09/06 Python
python获取外网IP并发邮件的实现方法
2017/10/01 Python
Python实现Kmeans聚类算法
2020/06/10 Python
python给图像加上mask,并提取mask区域实例
2020/01/19 Python
CSS3 不定高宽垂直水平居中的几种方式
2020/03/26 HTML / CSS
英国领先的奢侈品零售商之一:CRUISE
2016/12/02 全球购物
Shop Apotheke瑞士:您的健康与美容网上商店
2019/10/09 全球购物
美国最大的在线生存商店:Survival Frog
2020/12/13 全球购物
校运会入场式解说词
2014/02/10 职场文书
任命书标准格式
2015/03/02 职场文书
中秋节寄语2015
2015/03/24 职场文书
2015年“公民道德宣传日”活动方案
2015/05/06 职场文书
幼儿园园长工作总结2015
2015/05/25 职场文书
小学教师见习总结
2015/06/23 职场文书
2016教师廉洁教育心得体会
2016/01/13 职场文书
python3实现无权最短路径的方法
2021/05/12 Python
MySQL中in和exists区别详解
2021/06/03 MySQL
MySQL数据库之内置函数和自定义函数 function
2022/06/16 MySQL