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 相关文章推荐
Javascript打印网页部分内容的脚本
Nov 17 Javascript
利用JS重写Cognos右键菜单的实现代码
Apr 11 Javascript
JQuery中关于jquery.js与jquery.min.js的比较探讨
May 15 Javascript
jquery左右滚动焦点图banner图片鼠标经过显示上下页按钮
Oct 11 Javascript
BootStrap的JS插件之轮播效果案例详解
May 16 Javascript
JS Canvas定时器模拟动态加载动画
Sep 17 Javascript
Vue列表页渲染优化详解
Jul 24 Javascript
webpack之devtool详解
Feb 10 Javascript
小程序使用watch监听数据变化的方法详解
Sep 20 Javascript
js中switch语句的学习笔记
Mar 25 Javascript
vue用ant design中table表格,点击某行时触发的事件操作
Oct 28 Javascript
深入了解Vue动态组件和异步组件
Jan 26 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中ADODB类详解
2008/03/25 PHP
推荐一款PHP+jQuery制作的列表分页的功能模块
2014/10/14 PHP
php数组操作之键名比较与差集、交集赋值的方法
2014/11/10 PHP
PHP面向对象编程之深入理解方法重载与方法覆盖(多态)
2015/12/24 PHP
JavaScript 捕获窗口关闭事件
2009/07/26 Javascript
jQuery 事件队列调整方法
2009/09/18 Javascript
JavaScript学习笔记(十七)js 优化
2010/02/04 Javascript
一个JavaScript处理textarea中的字符成每一行实例
2014/09/22 Javascript
node.js中的fs.appendFile方法使用说明
2014/12/17 Javascript
jQuery ajax全局函数处理session过期后的ajax跳转问题
2016/06/03 Javascript
基于JQuery及AJAX实现名人名言随机生成器
2017/02/10 Javascript
微信小程序-getUserInfo回调的实例详解
2017/10/27 Javascript
vue中路由参数传递可能会遇到的坑
2017/12/07 Javascript
js实现微信/QQ直接跳转到支付宝APP打开口令领红包功能
2018/01/09 Javascript
原生实现一个react-redux的代码示例
2018/06/08 Javascript
微信小程序基于高德地图API实现天气组件(动态效果)
2020/10/22 Javascript
Vue实现省市区三级联动
2020/12/27 Vue.js
Python将xml和xsl转换为html的方法
2015/03/10 Python
Python语法快速入门指南
2015/10/12 Python
Python对列表去重的多种方法(四种方法)
2017/12/05 Python
在PyCharm导航区中打开多个Project的关闭方法
2019/01/17 Python
Python中使用__new__实现单例模式并解析
2019/06/25 Python
Python 获取命令行参数内容及参数个数的实例
2019/12/20 Python
keras的siamese(孪生网络)实现案例
2020/06/12 Python
python selenium xpath定位操作
2020/09/01 Python
PyQt5结合matplotlib绘图的实现示例
2020/09/15 Python
Room Mate Hotels美国:西班牙酒店品牌
2018/04/10 全球购物
员工考核管理制度
2014/02/02 职场文书
小学生检讨书大全
2014/02/06 职场文书
《二泉映月》教学反思
2014/04/15 职场文书
幼儿园三八妇女节活动总结
2015/02/06 职场文书
结婚司仪主持词
2015/06/29 职场文书
2016年六一文艺汇演开幕词
2016/03/04 职场文书
聘任书的格式及模板
2019/10/28 职场文书
vue前端工程的搭建
2021/03/31 Vue.js
MySQL连接控制插件介绍
2021/09/25 MySQL