js实现浏览器检测
2018-03-13 本文已影响0人
_二向箔_
JavaScript 的 Navigator 的对象,可以为访问者提供浏览器的一些信息,通过这些信息,可以做不同浏览器的区别的判断。
相关链接:
https://www.w3schools.com/js/js_window_navigator.asp
http://www.w3school.com.cn/jsref/dom_obj_navigator.asp
不同的浏览器检测( userAgent 检测)
Navigator的 userAgent 属性是一个只读的字符串,声明了浏览器用于 HTTP 请求的用户代理头的值。一般从userAgent 就可以获取到不同浏览器的区别字段。
console.log(navigator.userAgent)
在chrome 里面的结果
Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36
(KHTML, like Gecko) Chrome/63.0.3239.108 Safari/537.36
在ie里面的结果
Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36
(KHTML, like Gecko) Chrome/51.0.2704.79 Safari/537.36 Edge/14.14393
我们可以看到,ie 浏览器的用户代理报头多了一个 edge 的标志;不止ie 其他浏览器也有(这里得排除360 浏览器,下面会单独说一下)
就目前常用的举个例子:
var ua = navigator.userAgent.match(/Chrome\/(\d+\.\d+)/);
if (ua !== null) {
if (ua.match(/QQBrowser\/(\d+\.\d+)/)) {
console.log('qq浏览器')
}else if(ua.match(/Edge\/(\d+\.\d+)/)){
console.log('ie浏览器')
}
}
其他浏览器你们可以去试一下,^_0 我就不写啦!!!
360浏览器的检测
360 是双核浏览器, chrome 的内核 和 IE 的内核;而且360 浏览器有着各种伪装,用 userAgent 已经是检测不出来了。
基于Webkit的内核用于常用网站的高速浏览,基于IE的内核主要用于部分网银、政府、办公系统等网站的正常使用。
如果你要指定内核只需在head标签中添加一行代码即可
若页面需默认用极速核,增加标签:<meta name="renderer" content="webkit">
若页面需默认用ie兼容内核,增加标签:<meta name="renderer" content="ie-comp">
若页面需默认用ie标准内核,增加标签:<meta name="renderer" content="ie-stand">
userAgent 不能用来判断了,只能找别的方法,目前是用下面的这段代码可以实现
// 单独检测360浏览器
if ((navigator.mimeTypes[40] || !navigator.mimeTypes.length)) {
console.log('360')
}
如有错误,望指正 0_^