因为现在接手的项目正好要做浏览器兼容，顺便写出来与大家分享一下，上周拉出的用户使用的浏览器占比如下图所示：
最大比重的chrome项中是包含了360浏览器的用户，且360的占大部分。除上述之外，还有一大部分用户是用千牛工作台来使用我们软件的，并不包含在上述统计中，也是令人头痛的一点。
浏览器分类
根据内核来说的话，其实主流的浏览器内核分为：Trident，Gecko，Webkit，Chromium/Bink 这几种，相对应的浏览器就是：IE，Mozilla FireFox，Safari，Chrome 。而国内的浏览器基本都是双核浏览器，一个内核是Trident，还有一个其他内核。一般把其他内核叫做“高速浏览模式”，而Trident则是“兼容浏览模式”，用户可以来回切换。兼容模式可以让银行、政府系统或者支付系统的页面正常显示。
若页面需默认用极速内核，可在head标签里增加：
<meta name="renderer" content="webkit">
若页面需默认用ie兼容内核，增加标签：
<meta name="renderer" content="ie-comp">
若页面需默认用ie标准内核，增加标签：
<meta name="renderer" content="ie-stand">
也可以指定多个内核名称，浏览器会从左到右选择拥有的内核进行网页渲染：
<meta name="renderer" content="webkit|ie-comp|ie-stand">
分类总结：
（1）IE浏览器内核：Trident内核，也被称为IE内核；
（2）Chrome浏览器内核：Chromium内核 → Webkit内核 → Blink内核；
（3）Firefox浏览器内核：Gecko内核，也被称Firefox内核；
（4）Safari浏览器内核：Webkit内核；
（5）Opera浏览器内核：最初是自主研发的Presto内核，后跟随谷歌，从Webkit到Blink内核；
（6）360浏览器、猎豹浏览器内核：IE+Chrome双内核；
（7）搜狗、遨游、QQ浏览器内核：Trident（兼容模式）+Webkit（高速模式）；
（8）百度浏览器、世界之窗内核：IE内核；
浏览器版本信息
保险起见，还是自己先把用户的浏览器都下载测试了一遍，情况如下：
因为chrome会正常显示，没在测试范围内。如上图所示，主要要解决双核浏览器和千牛工作台6.02.09版的问题，要给用户升级或者切换内核模式的提醒。因为是react项目，源代码中包含了Object.entries等全局对象方法，无法兼容ie8以下，所以不作考虑，直接提醒用户更换浏览器。
那么接下来，重要的就是获取用户浏览器类型和版本，如下是各大浏览器navigator.userAgent 的输出值：
# IE 8
Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 10.0; WOW64; Trident/8.0; .NET4.0C; .NET4.0E; InfoPath.3; .NET CLR 2.0.50727; .NET CLR 3.0.30729; .NET CLR 3.5.30729)
#IE 11
"Mozilla/5.0 (Windows NT 10.0; WOW64; Trident/7.0; .NET4.0C; .NET4.0E; InfoPath.3; .NET CLR 2.0.50727; .NET CLR 3.0.30729; .NET CLR 3.5.30729; rv:11.0) like Gecko"
# EDGE
"Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/42.0.2311.135 Safari/537.36 Edge/12.10240"
# Opera
"Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/73.0.3683.103 Safari/537.36 OPR/60.0.3255.109"
# Firefox
"Mozilla/5.0 (Windows NT 6.1; WOW64; rv:34.0) Gecko/20100101 Firefox/34.0",
# Safari
"Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/534.57.2 (KHTML, like Gecko) Version/5.1.7 Safari/534.57.2",
# chrome
"Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/39.0.2171.71 Safari/537.36",
# 360浏览器
"Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/30.0.1599.101 Safari/537.36",
# 淘宝浏览器
"Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/536.11 (KHTML, like Gecko) Chrome/20.0.1132.11 TaoBrowser/2.0 Safari/536.11",
# 猎豹浏览器
"Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.1 (KHTML, like Gecko) Chrome/21.0.1180.71 Safari/537.1 LBBROWSER",
# QQ浏览器
"Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.1; WOW64; Trident/5.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; .NET4.0C; .NET4.0E; QQBrowser/7.0.3698.400)",
# 搜狗浏览器
"Mozilla/5.0 (Windows NT 5.1) AppleWebKit/535.11 (KHTML, like Gecko) Chrome/17.0.963.84 Safari/535.11 SE 2.X MetaSr 1.0",
# UC浏览器
"Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/38.0.2125.122 UBrowser/4.0.3214.0 Safari/537.36",
# 遨游浏览器
"Mozilla/5.0 (Windows NT 6.1) AppleWebKit/537.36 (KHTML, like Gecko) Maxthon/5.0 Chrome/47.0.2526.73 Safari/537.36"
# 2345浏览器
"Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/55.0.2883.87 Safari/537.36 2345Explorer/9.8.0.19047"
# 千牛工作台（6.02.09版）
"Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/44.0.2403.155 Aef/3.28 Qianniu/6.02.09N Safari/537.36"
（以上双核浏览器使用的都是非兼容模式下的内核）
识别浏览器类型
根据上面的userAgent，对于识别匹配浏览器类型，作如下总结：
（1）IE 10 之前，匹配关键字 'MSIE'；
（2）IE 11 匹配关键字 'rv:11.0) like Gecko' ；
（3）Edge匹配关键字 'Edge'；
（4）Firefox匹配关键字 'Firefox'，Safari匹配 'Safari'，Opera匹配 'OPR'；
（5）Chrome通过 'Chrome'匹配，但是你会发现双核浏览器的极速（高速）模式也是基于Chrome内核，那么这时不要用'Chrome'去做匹配，它们的userAgent的末尾都包含了它们相对应的唯一特殊的浏览器名称，如 'QQBrowser', 'LBBROWSER', 'Qianniu'等等，则可以用这一点去判断；
（6）而双核浏览器在兼容模式下时，使用的都是Trident内核，所以可以通过判断userAgent里是否包含'msie'，来判断用户是否切换到了兼容模式；
小插曲——解决IE8不执行脚本
在写完自认为逻辑没问题的需求代码之后，自测了一遍，各大浏览器都按需正常运行，除了ie8，我电脑上的ie8又相当难调试，一打断点就卡死。一开始思考的方向都不正确，最后发现可能是因为我电脑上某些配置文件被删除了，service pack也没办法安装。
发现了ie没有执行脚本这个事实之后，先是按照网上说的：
（1）工具-Internet选项-安全-自定义级别-脚本-活动脚本启用
（2）工具-Internet选项-高级-安全-允许活动内容在我的机器上运行
还是没执行！不过这一步确实也是必须的，一般来说这两个选项都是启用的，不知道我的ie8怎么把这个禁用了。
就继续寻找解决方案，最终找到了可行的：
点击"开始"菜单选中"运行"，输入以下命令： regsvr32 jscript.dll 回车
再次输入以下命令：regsvr32 vbscript.dll 回车
两次回车后都会弹出一个信息对话框“DllRegisterServer in xxxx.dll succeeded”，点击“确定”
如果还不行，按上面的方法把以下几个DLL文件同样进行注册：
mshtml.dll,urlmon.dll,msjava.dll,browseui.dll,oleaut32.dll,shell32.dll,actxprxy.dll,shdocvw.dll
最后，以防有用户出现和我相同的情况，保险起见，我使用了<noscript>标签，它被所有浏览器支持，在浏览器不支持执行脚本的时候，它里面的文本会显示到页面上：
本次任务暂时结束，有新的认知再补充~
网友评论