【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浏览器(safari、UA浏览器、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);
}