码迷,mamicode.com
首页 > 微信 > 详细

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

时间:2021-06-10 17:52:45      阅读:0      评论:0      收藏:0      [点我收藏+]

标签:span   判断   微信   nav   浏览器   rgb   navigator   net   环境   

项目中碰到这样一个需求点,在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浏览器

标签:span   判断   微信   nav   浏览器   rgb   navigator   net   环境   

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

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!