项目中碰到这样一个需求点,在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内核信息有点区别,上面有注明