H5根据浏览器内核判断并区分微信、QQ和QQ浏览器

老王 • • 微信开发技术 • 1335 阅读

项目中碰到这样一个需求点，在h5页面区分当前所处客户端环境是QQ客户端、微信客户端还是QQ浏览器客户端，并做不同的逻辑处理

首先可以通过 window.navigator.userAgent 获取到当前页面浏览器内核信息

经过一系列踩坑之后总结发现三者的内核信息区别

// 微信 ：      MicroMessenger    MQQBrowser    　　　　　　　　　　　　　　　　　　　　　　　NetType
// QQ  ：                        MQQBrowser(注：ios中无此信息，替换为QBWebView)    　　　　NetType
// QQ浏览器：                     MQQBrowser

由此可见只有微信的webview中有可明显区分的信息（MicroMessenger）

function env() {
let userAgent = window.navigator.userAgent;
let inWeChat  = userAgent.indexOf(‘MicroMessenger‘);
let androidBrowser= userAgent.indexOf(‘MQQBrowser‘);
let iosBrowser= userAgent.indexOf(‘QBWebView‘);
let netType= userAgent.indexOf(‘netType‘);
if (inWeChat > -1) {
// 微信有单独标识先判断微信
return ‘weChat‘
}
if (netType > -1 && (androidBrowser > -1 || iosBrowser > -1)) {
// QQ中有nettype信息
return ‘QQ‘
}
if (androidBrowser > -1 || iosBrowser > -1) {
// 最后再判断QQ浏览器
return ‘QQBrowser‘
}
return ‘‘;
}

上面方法即可区分出当前webview在QQ、微信还是QQ浏览器

要注意的一点就是安卓和ios中的QQ客户端的webview内核信息有点区别，上面有注明

H5根据浏览器内核判断并区分微信、QQ和QQ浏览器

原文：https://www.cnblogs.com/527xyz/p/14868450.html

以上是H5根据浏览器内核判断并区分微信、QQ和QQ浏览器的全部内容。
THE END
分享
二维码
< <上一篇
下一篇>>