浅谈前端浏览器兼容问题,包含千牛工作台

因为现在接手的项目正好要做浏览器兼容,顺便写出来与大家分享一下,上周拉出的用户使用的浏览器占比如下图所示:

最大比重的chrome项中是包含了360浏览器的用户,且360的占大部分。除上述之外,还有一大部分用户是用千牛工作台来使用我们软件的,并不包含在上述统计中,也是令人头痛的一点。

 浏览器分类

根据内核来说的话,其实主流的浏览器内核分为:TridentGeckoWebkitChromium/Bink 这几种,相对应的浏览器就是:IEMozilla FireFoxSafariChrome 。而国内的浏览器基本都是双核浏览器,一个内核是Trident,还有一个其他内核。一般把其他内核叫做“高速浏览模式”,而Trident则是“兼容浏览模式”,用户可以来回切换。兼容模式可以让银行、政府系统或者支付系统的页面正常显示。

若页面需默认用极速内核,可在head标签里增加:

若页面需默认用ie兼容内核,增加标签:

若页面需默认用ie标准内核,增加标签:

也可以指定多个内核名称,浏览器会从左到右选择拥有的内核进行网页渲染:

分类总结:

(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

最后,以防有用户出现和我相同的情况,保险起见,我使用了

本次任务暂时结束,有新的认知再补充~

你可能感兴趣的:(浅谈前端浏览器兼容问题,包含千牛工作台)