标签:iframe app href HTML5 timeout var 调起 APP location
为了提升app的曝光和app的用户新增,添加H5分享页的应用场景是必不可少的,但是各种平台环境不一,要如何兼容和策略处理。下面会一一说明
调起原生 app,然后下载APP
不同平台的兼容和策略处理,比如微信,微博,QQ,QQ空间,浏览器
android、ios调起的方式
Schame + Android Itent
Schema + Universal links(IOS9+)
window.location.href="";
说明:由于无法确定是否安装了客户端,因此通过window.location=schema的方式可能导致浏览器跳转到错误页;所以通过iframe.src或a.href载入schema是目前比较常见的方法;
代码实现
const iframeCallAPP=(url, downloadUrl, ios9Type)=> {
console.log('[iframeCallAPP1]'+url)
var timeout
var t=Date.now()
var interval=ios9Type ? 2500 : 2000
timeout && clearTimeout(timeout)
timeout=setTimeout(function () {
if (Date.now() - t < interval+1000) {
}
}, interval)
if (ios9Type) {
location.href=
}
var docNode=document
var iframe=docNode.createElement('iframe')
iframe.setAttribute('src', url)
// iframe.setAttribute('target', '_self');
iframe.setAttribute('style', 'display:none')
docNode.body.appendChild(iframe)
setTimeout(function () {
docNode.body.removeChild(iframe)
}, 200)
}
微信
应用宝deeplink
微博
中间提示页
类似于“请在浏览器打开”
当手机安装了App,能调起app后就不进行下载
没有安装App,过了一段时间,进行下载
H5 page call native app
标签:iframe,app,href,HTML5,timeout,var,调起,APP,location