标签：iframe app href HTML5 timeout var 调起 APP location

 

　　为了提升app的曝光和app的用户新增，添加H5分享页的应用场景是必不可少的，但是各种平台环境不一，要如何兼容和策略处理。下面会一一说明

 

　　调起原生 app，然后下载APP

 

　　不同平台的兼容和策略处理，比如微信，微博，QQ，QQ空间，浏览器

 

　　android、ios调起的方式

 

　　Schame + Android Itent

 

　　Schema ＋　Universal links（IOS9+）

 

　　<iframe src=""></iframe>

 

　　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