|  在技术加营销的道路上越走越远
温馨提示
我是弹窗内容
当前位置:首页 > 大前端开发 > JavaScript判断当前是5+App访问还是浏览器访问
JavaScript判断当前是5+App访问还是浏览器访问

JavaScript判断当前是5+App访问还是浏览器访问

日期:2021-07-16 浏览量:1218 原创作者:湖八爷
HBuilder X有一项很强大的功能,就是能把html5页面打包成一个APP,之后我会用一篇文章来详细介绍一下,如何使用HBuilder X把网站打包成APP。

打包之后,因为页面只有一个,那应该如何判断用户是通过5+App访问还是浏览器访问还是其他方式访问的呢?


我们第一时间想到的肯定是通过判断用户的userAgent来区分用户的访问渠道。废话不多说,直接写代码:


var ua = navigator.userAgent;

alert(ua);


这段代码的意思是通过JavaScript拿到用户的userAgent,然后打印出来。为什么要打印出来?当然是为了查看各个访问渠道有什么不一样的地方。


1:首先来看下华为手机,通过浏览器访问页面时打印的userAgent参数内容,如下图:


华为手机浏览器访问时打印的userAgent参数.jpg


2:华为手机使用微信访问时打印的userAgent参数,如下图:


华为手机使用微信访问时打印的userAgent参数.jpg


3:华为手机使用5+App访问时打印的userAgent参数,如下图:


华为手机使用5+App访问时打印的userAgent参数.jpg


通过上述三个不同渠道的访问和打印userAgent参数,大家有没有发现什么特别的地方?第一个肯定是三个不同渠道访问时打印的userAgent参数都不同;第二个就是最后一张图,通过5+App访问时出现了一个关键字,就是“Html5Plus”,这个关键字很特殊,因为他代表了这个APP的打包类型。


那到这一步,我们是不是就可以直接通过判断userAgent参数中有没有“Html5Plus”关键字来确认是否是5+App访问的呢?

我觉得还不够严谨,因为我们刚刚测试时使用的是同一个手机,为了更加严谨,需要测试下其他品牌的手机,同一个品牌不同型号的手机等情况是否也会出现“Html5Plus”这个关键字。


于是我立马找来了一台小米手机,接下来,我们一起看一下,小米手机不同渠道访问时打印的userAgent会有什么特殊的地方?


1:小米手机使用内置浏览器访问时打印的userAgent参数,如下图:


小米手机使用内置浏览器访问时打印的userAgent参数.jpg


2:小米手机使用微信访问时打印的userAgent参数,如下图:


小米手机使用微信访问时打印的userAgent参数.jpg


3:小米手机使用5+App访问时打印的userAgent参数,如下图:


小米手机使用5+App访问时打印的userAgent参数.jpg


到这一步,我们发现,小米手机使用5+App访问时打印的userAgent参数同样出现了“Html5Plus”这个关键字,而其他渠道则没有这个关键字。于是我立马又去找了其他同事的手机进行测试和打印,发现不管是什么品牌,什么型号的手机,只要是使用5+App访问,打印出来的userAgent参数就会出现“Html5Plus”这个关键字。

所以我们只需要判断一下userAgent参数中有没有“Html5Plus”这个关键字,就可以知道用户当前是5+App访问还是浏览器访问了,具体代码如下:

/**
 * 判断当前页面是5+App内打开还是浏览器打开
 */
function check_app() {
    var ua = navigator.userAgent;
    if(ua.indexOf('Html5Plus') > -1){
        return true;
    }else{
        return false;
    }
}

/**
 * 如果不是APP端,则调整头部样式
 */
if(!check_app()){
    $(".header").css("padding", 0);
    $("body").css("margin-top", "-5vw");
}