您的位置:时间博客>前端>js在手机浏览器端唤起APP,没有app就去下载APP的方法

js在手机浏览器端唤起APP,没有app就去下载APP的方法

这种功能的作用:

1、一般公司有自己的app,而app是需要不断有新用户涌入才能持续运营,达到不错的收入就需要使用这种方式进行引入新的用户

2、一些内容在网页端体验不好,或者一些功能需要app内才能实现,就需要将用户引入app中打开app并自动跳到相应页面

首先,这个方法仅适用于移动端h5页面,一般的智能机都是可以使用的这里使用的是es5的代码模式,容易理解

知道了需求,我们看看如何实现:

1、首先要通过UA判断当前浏览器UA 并转大写用来分别针对安卓和ios机型做2种不一样的处理

var UA=navigator.userAgent.toUpperCase();

2、根据UA判断的安卓还是ios机型,分别做处理

安卓设备:

通过隐藏iframe方式实现iframe中请求协议启动地址,创建iframe需要时间,延迟一点时间,将iframe加入dom,产生请求;

如果app已安装,浏览器就会弹出一个提示框,问用户是否启动app;

如果未安装,浏览器等待一秒后就会去下载;

之所以使用iframe,为了防止location跳转后,js请求中断,跳入空白页;

代码中的Data.now()-t < 1200,只所以是1200,其实也是一个估计值,为了大部分解决一些已经安装的app,1秒后还是会跳转下载因为打开app的瞬间,浏览器可能会卡一下js的执行导致延迟时间变长超出1200ms就可以不用去下载了

//如果是安卓浏览器(自带浏览器UA浏览器QQ浏览器等)
if(UA.indexOf("ANDROID")!=-1){
    //创建iframe
    var ifr=document.createElement("iframe");
    //iframe设置为app的协议打开方式地址
    ifr.src="cmread://cmread.com/client?url=wap.cmread.com/rbc/402310056/index.htm";//安卓协议启动地址
    ifr.style.display="none";//隐藏
    var t=Date.now();//取当前时间戳
    //延迟执行iframe 实现访问app协议打开app
    setTimeout(function(){
        document.body.appendChild(ifr);
    },96);
    //延迟执行 如果1s没响应,就表示你手机中没有该app就可以去下载了
    setTimeout(function(){
        if(Date.now() - t < 1200){
            document.body.appendChild(ifr);
            location.href="http://wap.cmread.com/r/p/pg/212/CMREADBC_Android/CMREADBC_Android.apk";//安卓下载地址
        }
    },1001);
}

IOS设备:

首先,ios浏览器已经不支持再使用iframe了,所以上面的方式不适合用在ios上

因此,这里只能采用location的方式

如果安装了app,ios浏览器打开app协议前就会弹出个框,提示是否打开

如果没有安装,就不会弹出这个提示

//如果是ios浏览器(safariUA浏览器QQ浏览器等)
else if(UA.indexOf("IOS")!=-1 || UA.indexOf("IPHONE")!=-1){
    var t=Date.now();//取当前时间戳
    //延迟直接跳转唤起app协议地址
    setTimeout(function(){
        location.href='cmread://cmread.com/clientjson={"activity":{"url":"http://wap.cmread.com/rbc/402310056/index.htm"}}&contentId=1004';//ios协议启动地址
    },96);
    //延迟执行 如果1s没响应,就表示你手机中没有该app就可以去下载了
    setTimeout(function(){
        if(Date.now() - t < 1200){
            location.href="https://itunes.apple.com/cn/app/he-yue-du/id863837323?mt=8&uo=4&at=10lM6r";//ios下载地址
        }
    },1001);
}

 

转载请注明本文标题和链接:《 js在手机浏览器端唤起APP,没有app就去下载APP的方法

相关推荐

网友评论 0

未登陆 表情
Ctrl+Enter快速提交