html5页面app,HTML5页面调起APP

标签：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