首先,作为一个合格的前端工程师,我们都知道BOM对象有一个属性navigator,包含了浏览器的信息。
W3C中对navigator里面几种常用的属性做了介绍
而我们在平时开发中,经常需要去判断当前页面设备环境是什么,从而处理一些兼容问题,使用频率最高的应该就是传说中的userAgent
属性了。
userAgent
userAgent 属性是一个只读的字符串,声明了浏览器用于 HTTP 请求的用户代理头的值。
它一般情况下是由Navigator属性中appCodeName
,加上一条斜线,以及appVersion
属性合成
我们可以测试一下各个环境中的属性值
chrome
Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/63.0.3239.132 Safari/537.36
关键词:Chrome36,WebKit引擎
13年后版本的chrome用的是Blink引擎了
FireFox
特意下了FF测试
Mozilla/5.0 (Windows NT 6.1; WOW64; rv:58.0) Gecko/20100101 Firefox/58.0
关键词:Firefox58,Gecko引擎
edge
Mozilla/5.0 (Windows NT 6.1; WOW64; Trident/7.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; InfoPath.3; .NET4.0C; .NET4.0E; rv:11.0) like Gecko
关键词:看了半天好像没发现有特指edge的字符,可以先判断是否为IE系列,再排除IE其他浏览器
(去查了下edge使用的是edge引擎,莫非我遇到了假的edge?)
IE 10
Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 6.1; WOW64; Trident/7.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; InfoPath.3; .NET4.0C; .NET4.0E)
关键词: MSIE 10.0, Trident引擎
IE 9
Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.1; WOW64; Trident/7.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; InfoPath.3; .NET4.0C; .NET4.0E)
关键词: MSIE 9.0,Trident引擎
opera
Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/63.0.3239.132 Safari/537.36 OPR/50.0.2762.67
关键词:OPR,webkit引擎
环境判断
平时业务中和IE打交道比较多,有一个系列的平台需要兼容到ie7,关于兼容性的坑我之后会再写一篇文章做个总结。
后来客户端进行了升级,强制要求客户升级到IE10及其以上,才终于让我可以愉快地撸代码。所以如果当前浏览器版本比较低,就需要提示用户升级。
在对几个浏览器做了测试之后,我使用的方法是这样的
var isIE = userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1;
//判断是否IE浏览器
if (isIE) {
var reIE = new RegExp("MSIE (\\d+\\.\\d+);");
reIE.test(userAgent);
var fIEVersion = parseFloat(RegExp["$1"]);
if (fIEVersion <10){
//版本过低
alert("当前浏览器版本过低,部分功能会有影响,请升级!")
}
}//isIE end
网上有一些方法,对ie进行判断时需要排除先edge和opera,不明觉厉,因为自己测试之后并不觉得他们需要单独排除。这种写法暂时也没有遇到问题,但我也不可能把所有浏览器的各个版本都过一遍。
若有考虑不周之处,还望大神们指点
以上