浏览器兼容性

检测主流浏览器(IE,Opera,Chrome,Firefox, Safari的类型和版本），具体看代码，如果有问题，欢迎留言var Browser = (function(window) { var agent = window.navigator.userAgent; var IE10 = ‘IE10’; //IE10及以下 var IE11 = ‘IE11’; var Edge = ‘Edge’; var Opera = ‘Opera’; var Chrome = ‘Chrome’; var Firefox = ‘Firefox’; var Safari = ‘Safari’; var System = { type: ‘’, version: ‘’, getIe10Version: function() { try { return agent.match(/MSIE ([\d.]+)/)[1] || ‘0’; } catch (e) { console.log(e); return ‘0’; } }, operaVersion: function() { try { if (agent.indexOf(‘Opera’) > -1) { return agent.match(/Opera.([\d.]+)/)[1]; } else { return agent.match(/OPR/([\d.]+)/)[1]; } } catch (e) { console.log(e); return 0; } }, //描述:version过滤.如31.0.252.152 只保留31.0 versionFilter: function() { if (arguments.length === 1 && typeof arguments[0] === ‘string’) { var version = arguments[0]; var start, end; start = version.indexOf(’.’); if (start > 0) { end = version.indexOf(’.’, start + 1); if (end !== -1) { return version.substr(0, end); } } return version; } else if (arguments.length === 1) { return arguments[0]; } return 0; }, }; try { // 检测浏览器类型 if (/MSIE/.test(agent)) { System.type = IE10; } else if (/rv:([\d.]+)) like gecko/.test(agent.toLowerCase())) { System.type = IE11; } else if (agent.indexOf(‘Edge’) > -1) { System.type = Edge; } else if (agent.indexOf(‘Opera’) > -1 || agent.indexOf(‘OPR’) > -1) { System.type = Opera; } else if (agent.indexOf(‘Chrome’) > -1 && agent.indexOf(‘Safari’) > -1) { System.type = Chrome; } else if (agent.indexOf(‘Safari’) > -1 && agent.indexOf(‘Chrome’) === -1) { System.type = Safari; } else if (agent.indexOf(‘Firefox’) > -1) { System.type = Firefox; } else { System.type = ‘unknow’; } // 版本号 switch (System.type) { case IE10: System.version = System.getIe10Version(); break; case IE11: System.version = ‘11’; break; case Edge: System.version = ’edge’; break; case Firefox: System.version = agent.match(/Firefox/([\d.]+)/)[1]; break; case Chrome: System.version = agent.match(/Chrome/([\d.]+)/)[1]; break; case Opera: System.version = System.operaVersion(); break; case Safari: System.version = agent.match(/Version/([\d.]+)/)[1]; break; default: System.version = ‘0’; } System.version = System.versionFilter(System.version); console.log(System.type,System.version); } catch (e) { console.log(e); }})(window); ...

在现实当中，浏览器之间的差异以及不同浏览器的怪癖，多得不胜枚举。因此，客户端检测除了是一种补救措施之外，更是一种行之有效的开发策略检测 web 客户端的手段有很多，而且各有利弊。但最重要的是要知道，不到万不得已，就不要使用客户端检测！如果能找到更通用的方法，应优先采用更通用的方法。既是，先设计通用的方案，在针对差异增强该方案能力检测能力检测的目标不是识别特定浏览器，而是识别浏览器的能力。只要确定浏览器的能力，就可以给出特定解决方案检测的时候应该尽可能精确，例如，你想检测 sort，不应该只检测是否存在 sort 属性，而应该更深一步检测 sort 是否是 function 类型的。而且需要注意 typeof 在各个浏览器之间的差异能力检测并非浏览器检测，并不能识别出特定的浏览器，因为其他浏览器新版本可能会改变，导致你的检测逻辑不严谨检测完，应该把检测结果保存起来，这样就不需要每次都进行例如：早期针对 IE 的检测：function getElement(id) { if (document.getElementById) { return document.getElementById(id); } else if (document.all) { return document.all[id]; } else { throw new Error(‘getElementById不可用’); }}怪癖检测识别浏览器的特殊行为，检测该浏览器存在什么缺陷一般来说，怪癖都是个别浏览器独有的，故归为 bug。由于检测怪癖需要运行代码，用来检验缺陷。故建议仅检测有直接影响到，并且最好在一开始便执行- 检测例如 ： IE8 及更早版本，有个 bug，新增属性如果与某个 Enumerable 标为 false 的原型属性同名，for in 循环无法遍历出它。用户代理检测（user-agent）用户代理通过检测用户代理字符串来确定实际使用的浏览器。在服务器端，这是一种常用且广为接受的做法，而在客户端，则被当做万不得已才用的做法，优先级在能力检测和怪癖检测之后。识别呈现引擎：IE、 Gecko、Webkit、KHTML、Opera由于历史原因，有些引擎返回的 ua 中存在诸多不一致的地方。所以在检测的时候，检测的顺序很重要Opera –> Webkit –> KHTML –> Gecko –> IE.识别浏览器大多数情况下，识别呈现引擎足以让我们才去正确的操作。但是，只有呈现引擎还不能说明存在所需的 js 功能。例如，safari 和 chrome 的呈现引擎都是 webkit，但他们的 js 引擎却不一样。浏览器：IE , Firefox，safari，konq，opera，chrome识别平台通过 navigator.platform 来检测不同的平台。navigator.platform 属性可能的值包括：" Win32 " , " Win64 " , " MacPPC " , " MacIntel " , " X11 " , " Linux i686 “.识别 windows 操作系统通过检测 userAgent 中的字符串，用正则识别不同的 windows 版本win2000 之后，大部分浏览器表示操作系统的字符串大部分相同，只有版本号有变化。识别移动设备ios 设备: 检查是不是 Mac OS ，字符串中是否包含“Mobile”，然后再使用正则确定是否存在 IOS 版本号。android： 搜索字符串“Android”，并取得紧随其后的版本号识别游戏系统Wii 或 playstation小结用户代理检测是客户端检测的最后一个选择。只要可能应该优先采用能力检测，怪癖检测次之用户代理检测一般适用于下列情况：为了跟踪分析等目的需要知道确切的浏览器不能直接准确的使用能力检测和怪癖检测。同一款浏览器在不同的平台上具备不同的能力，这时候就需要确定浏览器位于哪个平台。 ...

如果您已经是新版Chrome，会看到如下错误错误提示: 无法从该网站添加应用、扩展程序和用户脚本原因是：自从 Chrome 67 以后就不再支持，拖动安装crx插件的方法了。而目最新版本已经到了 Chrome 71 。 这里简单说一下，兼容所有chrome版本的插件离线安装的方法。一、下载插件使用插件可以极大提高chrome浏览器的用户体验，包括常用的去广告、划词翻译、office文件在线预览、还有一些开发者的调试工具等。插件下载地址 : 极简插件二、安装插件新版chrome的安装方法可以兼容所有版本的chrome浏览器。首先要下载插件伴侣下载地址：官方下载 备用下载打开以后的界面开始之前先退出chrome浏览器选择插件开始安装至此安装完成，打开chrome浏览器，去启用一下插件。点击【右上角3个点】 - 【更多工具】 - 【扩展程序】依次打开 【开发者模式】 和 【插件右下角的开关】 即可。大功告成另外找插件可以参考我之前发的文章:新站上线，分享10个最强chrome浏览器插件！瞬间开发效率加倍