前端处理在web打开app功能,有app就打开,没app就提示需要下载直接跳到下载app的页面

由于有的浏览器是禁止在js里面直接用location跳到app地址的,所以统一用一个弹框提示用户要不要跳到app,确定按钮是一个a标签,地址是app那边设置的可以通过链接打开app的地址;

需要打开app的地方调用自己封装的打开弹框的方法 ,这里就是弹出一个确认框可以用自己的;通过页面可见性的改变事件来处理是否安装了app;

用到的知识点  visibilitychange :https://developer.mozilla.org/zh-CN/docs/Web/API/Document/visibilitychange_event

 toShowConfirmLay(“要打开app吗?”);
 
//跳app的取消框
var hiddenPro = 'hidden' in document ? 'hidden' : 
'webkitHidden' in document ? 'webkitHidden' :
'mozHidden' in document ? 'mozHidden' :
null;
var appTime = null
//兼容不同的浏览器
var changeEvent = hiddenPro.replace(/hidden/i,'visibilitychange')
//窗口是否可见事件变化的回调函数
function isGoApp(){
    if(!document[hiddenPro]){
        //留在了当前页面
    }else{
        //跳到了app把提示要下载app的定时器去掉不需要提示了,把窗口监听去掉
        clearTimeout(appTime)
        document.removeEventListener(changeEvent,isGoApp)
    }
};
//跳app的确认框 
$(document).on("click", ".sure", function () {
    toHideConfirmLay(); //隐藏弹框
    document.addEventListener(changeEvent,isGoApp) //点击确认后就开始监听这个窗口可见改变的事件
    appTime = setTimeout(function(){//设置一个定时器提示要下载app,如果有app的话在上面的回调函数把这个定时器清除不触发
        document.removeEventListener(changeEvent,isGoApp)lopdealsToast("text","请先安装app",3000,function(){
            //需要下载的app的下载地址
            location.href="https://play.google.com/store/apps/details?''''"
        })
    },2000)
});
$(document).on("click", ".cancel", function () { //是否跳到app的取消按钮的点击事件,把弹框去掉
    toHideConfirmLay();
});

 

posted @ 2020-05-15 16:42  missLiuliu  阅读(1516)  评论(0编辑  收藏  举报