js实现浏览器检测

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标签中添加一行代码即可

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

userAgent 不能用来判断了,只能找别的方法,目前是用下面的这段代码可以实现

// 单独检测360浏览器
        if ((navigator.mimeTypes[40] || !navigator.mimeTypes.length)) {
                console.log('360')
            }

如有错误,望指正 0_^

你可能感兴趣的:(js实现浏览器检测)