JS如何判定一个浏览器为360浏览器?

星级:
360安全浏览器和360极速浏览器的ua与其内核Chrome极其相近,无法通过ua比对关键字将其从Chrome浏览器中区分出来,但可以通过其浏览器的navigator.mimeTypes(PC)或者navigator.userAgentData(移动端)加以区分。

计算机前端工程师在做网页开发的时候,经常需要判定当前用户使用的浏览器是什么浏览器。判定浏览器类别的时候,最常用的做法当属获取浏览器ua,然后通过匹配ua中的关键字来判定,因为每一个浏览器开发商在开发自己的浏览器的同时,都会向自己开发浏览器的ua中写入代表自己公司的关键字名称,比如火狐浏览器的ua中必然包含“firefox”关键字,百度浏览器的ua中也必然包含“baidu”关键字,UC浏览器的ua中则必然包含“ucbrowser”关键字….

不过,凡事都有例外,像360公司开发的浏览器,无论是360安全浏览器还是360极速浏览器,则都没有特别的关键字,而是使用与其原始内核谷歌Chrome一模一样的ua。这样,前端工程师们就没办法通过ua来判定一款浏览器到底是360浏览器还是Chrome浏览器了。

那么,这是不是意味着无法通过js判定一款浏览器是不是360浏览器呢?答案是否定的。

通过JS代码,我们依旧能将360浏览器从Chrome浏览器中区分出来。

在当今的浏览器市场,谷歌的Chrome作为其中最优秀的代表,市场份额是最大的,同时因为是开源的,所以国内大量的浏览器其实也都是基于它开发出来的,比如著名的UC浏览器,QQ浏览器,还有前面提到的360安全浏览器和360极速浏览器,所以这些浏览器一般也都会在ua中保留Chrome这个关键词,所以我们首先需要从浏览器的ua中判定是否存在Chrome关键字,以确定浏览器是否基于Chrome开发。


//判定浏览器是否基于Chrome开发
function isChrome(){
//获取浏览器ua,并转为小写
var ua = navigator.userAgent.toLowerCase();
if(ua.indexOf("chrome") {
return true;
}else{
return false;
}
}

如果确定浏览器是基于Chrome开发,则可以继续读取浏览器的 mimeTypes 数组,并且循环读取mimeTypes 的type。一般而言,谷歌Chrome中的mimeTypes 只有以下四个对象:

application/pdf
application/x-google-chrome-pdf
application/x-nacl
application/x-pnacl

但其他浏览器则会在以上4个对象的基础上添加自己独特的对象,并且标记上自己独特的名称,360的浏览器也不例外。通过对比,我们可以发现360的浏览器的mimeTypes 中会有2个打上360标志的type对象:

application/360softmgrplugin
application/x360mmplugin

现在,程序脉络已经已经很明显了,我们只需要循环比对mimeTypes 的type中是否包含360关键字就能够精确地将360安全浏览器和360极速浏览器从Chrome浏览器中区分出来了。

//判定是否为360浏览器
function is360Chrome(){
var mime_types = navigator.mimeTypes;
for (var i = 0; i < mime_types.length; i++) {
console.log(mime_types[i].type);
if (mime_types[i].type.indexOf('360')>0) return true;
}
return false;
}

当然,第一步判定浏览器的ua中是否包含Chrome关键字从而判定浏览器是否是基于Chrome开发可有可无,加上只是为了让JS代码逻辑更强而已。

另外,以上代码只针对PC端浏览器有效,对移动端无效,移动端如果要将360浏览器从Chrome中区分出来需要另写代码。通过比对360浏览器和Chrome浏览器的navigator 属性,我们可以发现360浏览器的navigator  属性中并不包含userAgentData 属性,所以判定代码如下:

//判定是否为360浏览器
function is360Chrome(){
if (typeof navigator.userAgentData == 'undefined'){
return true;
}
return false;
}

不过,这段代码并不健全,所以在此之间需要先排除掉其他同样基于Chrome开发的浏览器,比如QQ浏览器和UC浏览器等。

最新评论

星级:
参考资料
编辑者:
编辑日期:
反驳 支持