浏览器识别

Posted on Edited on In

Javascript引擎区分
套壳浏览器识别

Javascript 引擎 & 浏览器引擎

Javascript 引擎

  • V8: chrome, chromium, edge
  • SpiderMonkey: firefox
  • JavaScriptCore: safari, other webkit-based browser
  • chakra: ie

浏览器引擎

layout/rendering 引擎 + js 引擎

  • gecko: firefox
  • webkit: safari, 以前的 chrome
  • blink: 现在的 chrome
  • trident: ie
  • presto: opera

通过全局对象 navigator.userAgent 可以获得关于浏览器引擎的信息

套壳浏览器

  • 国内浏览器基本都是所谓套壳浏览器，即在 chrome & ie 基础上加点东西，一般极速模式对应 chrome，兼容模式对应 ie
  • 但是套壳浏览器可能用的不是最新版内核，或者某些 api 表现不一样..
  • 一般套壳浏览器会在 userAgent 上加上自己的厂商标识，不过目前发现 360 没有（后面给出一种暂时可用的 hack）
  • ps. 调试过程中发现 360 还可以换 ie11/10/9/8… 的内核，用来测试兼容性还是挺好用的

代码

发现 360 的 navigator.mimeTypes 与 chrome 有很大不同，其中有一些项带着 360 标识，应该别的浏览器不会有吧..

1
2
3
4
5
6
var mime = navigator.mimeTypes;
for (var key in mime) {
    if (/360/.test(mime[key].type)) {
        console.log('360');
    }
}

其他

  • 注意低版本浏览器可能不支持 es6 甚至 es5 语法
  • 如果整合进项目中，最好将这部分与其他部分分离，不然为了兼容低版本和 ie 需要 webpack 加很多 babel 配置，而且可能还不行…