此处以君凯商联网(品质特产网站)为例
<a id="openApp" >君凯商联网</a>
许多移动端网站例如美团、京东等都会提示是否进入或下载app,或者是继续进行浏览网页版,用来提高app下载量,达到用户引流;
实现原理是将浏览器协议直接更换为打开本地app的协议,找到匹配项app后开启;或者是在页面中创建iframe,将iframe的url更换为打开app协议;触发事件的同事创建时间对象,若在单位时间内如1s内打开则清楚iframe或关闭window,若在3s后仍未打开则判定为本地没有安装app,confirm前往是否下载
var ios_schema = "唤醒协议",ios_download_url = "https://itunes.apple.com/cn/app/idxxxxxxxxx";//此处为appid //schema 为唤醒app的协议以及地址 ,可与相关安卓、ios开发索要该数据 var android_schema = "唤醒协议",android_download_url = "下载地址"; if(navigator.userAgent.match(/android/i)) { document.getElementById("openApp").onclick = function(e) { console.log("这是安卓"); var loadTime = new Date(); var ifr = document.createElement("iframe"); // ifr.src = "jkslw438://";//打开app的协议,有app同事提供 ifr.src = "jkslw://jkslw.cn/path"; ifr.style.display = "none"; document.body.appendChild(ifr); window.setTimeout(function() { var outTime = new Date(); document.body.removeChild(ifr); if(confirm("检测到您手机可能没有安装app,您要前往下载君凯商联网app吗?")) { location.href = "https://www.baidu.com";//打开app下载地址,有app同事提供 } }, 2000) }; } if(navigator.userAgent.match(/(iPhone|iPod|iPad);?/i)) { var install = false; document.getElementById("openApp").onclick = function(e) { var loadTime = new Date(); location.href = ios_schema; setTimeout(function(){ var outTime = new Date() if(confirm("检测到您手机可能没有安装app,马上去苹果商店下载吧~ ")){ location.href = ios_download_url; } },2000) }; }
本人测试ios时,本地已安装app,但使用创建iframe无法唤醒,但直接将浏览器url替换即可唤醒,个人为找到解决方法,希望有大神帮助解答。
君凯商联网 - Alex.Ma