【JS】点击页面判断是否安装app并打开,否则跳转下载的方法 - H__D - 博客园
　　App产品在运营推广上有一个需求，就是要求可以让用户在访问我们的推广网页时，就可以判断出这个用户手机上是否安装了我们的App，如果安装了则可以直接在网页上打开，否则就引导用户前往下载。从而形成一个推广上的闭环。
　　而对于点击链接后，能否直接打开，可以通过下面的代码来实现。前提条件：你得知道你的APP对应的打开协议，如贴吧APP，协议为：com.baidu.tieba:// ，微信的：weixin:// ，等等
1 &!-- a标签点击打开的动作，在click事件中注册 --&
2 &a href="javascript:;" id="openApp"&贴吧客户端&/a&
3 &script type="text/javascript"&
document.getElementById('openApp').onclick = function(e){
// 通过iframe的方式试图打开APP，如果能正常打开，会直接切换到APP，并自动阻止js其他行为
var ifr = document.createElement('iframe');
ifr.src = 'com.baidu.tieba://';//打开app的协议，有app同事提供
ifr.style.display = 'none';
document.body.appendChild(ifr);
window.setTimeout(function(){
document.body.removeChild(ifr);
13 　　　　　　　window.location.href = "https://itunes.apple.com/cn/app/id";//打开app下载地址，有app同事提供
16 &/script&
此方法有些浏览器不兼容iframe，可以window.location的方法解决
1 &a href="javascript:;" id="openApp"&贴吧客户端&/a&
2 &script type="text/javascript"&
document.getElementById('openApp').onclick = function(e){
window.location.href = "com.baidu.tieba://";
window.setTimeout(function(){
window.location.href = "https://itunes.apple.com/cn/app/id";//打开app下载地址，有app同事提供
9 &/script&
IOS上的Banner
　　参考网页：
　　应用场景：
　　1、用户第一次访问宣传页面
& &　　a、点击Banner，进入到APP Store中对应的APP下载页
& &　　b、APP下载页中提示：安装；用户点击安装
& &　　c、安装完成后，APP下载页中提示：打开；用户继续点击打开
& &　　d、用户正常使用APP
　　2、用户第二次访问宣传页面
& &　　a、点击Banner，进入到APP Store中对应的APP下载页
& &　　b、APP下载页中提示：打开；用户直接点击打开
& &　　c、用户正常使用APP
　　3、用户第三次、第四次、...、第N次访问，操作步骤同2
　　在iOS上，要增加一个APP的大Banner，其实只需要在&head&标签内增加一个&meta&标签即可，格式如：
　　　　&meta name='apple-itunes-app' content='app-id=你的APP-ID'&
　　百度贴吧的
1 &meta name='apple-itunes-app' content='app-id='&
1 &!DOCTYPE html&
4 &meta http-equiv="Content-Type" content="text/ charset=UTF-8"&
5 &title&this's a demo&/title&
&meta name='apple-itunes-app' content='app-id='&
&a href="javascript:;" id="openApp"&贴吧客户端&/a&
10 &/body&
11 &/html&
12 &script type="text/javascript"&
document.getElementById('openApp').onclick = function(e){
if(navigator.userAgent.match(/(iPhone|iPod|iPad);?/i))
window.location.href = "com.baidu.tieba://";//ios app协议
window.setTimeout(function() {
window.location.href = "https://itunes.apple.com/cn/app/id";
if(navigator.userAgent.match(/android/i))
window.location.href = "com.baidu.tieba://app";//android app协议
window.setTimeout(function() {
window.location.href = "https://****.apk";//android 下载地址
30 &/script&
阅读(...) 评论()
Copyright & H__D
Powered by:
模板提供：随着App的开发，花样也越来越多了。现如今，是一个商家猖獗的时代，处处都是他们投放的广告。广泛的推广他们的产品或者服务，他们就在网上投放大量的网页，其中网页里面有一些特殊或者炫彩的按钮，或者文字。当浏览用户点击他们，他们就会进入这个商家的App里面，打开商家指定的页面。如果没有安装商家的App.他们提示您，去相应的位置下载他们的App。那么如何从网页调起您的App呢？
第一步：配置您的App。
1、我们要到您的App。（我找的App如下）
2、打开 看美App的开发项目的 info.plist 页面，并按图设置。（如下：图）
第二：我们编写 HTML 网页模拟商家网页。
1、网页内容代码
&!DOCTYPE html&
&title&IOS 通过浏览器打开App(看美)&/title&
&meta charset="utf-8"&
&style type="text/css"&
position: top:50left:360float:
&div class="back"&
&font size="20px"&
白日依山尽&br&
黄河入海流&br&
&a href="KanMeiApp://kanmei.zsj.com" &打开看美APP&/a&&br&
生活多回味&br&
&/html&效果：
第三：找到您写的HTML文件。（我的如下）
找到后，打开你的手机。这里我们使用模拟器替代。
打开，模拟器里面的浏览器（safari），并把您写的HTML 直接拖入进去。结果如下图：
第四：提示
1、如果你的模拟器里面没有安装（看美）App。这浏览器将打开失败。并提示如下：
2、我们就去安装我们的app(看美)
并双击，Home键，确保，我们要启动的App。处于关闭状态。
第六：您现在就可以，回到网页，点击蓝色字体（打开看美App），会有下面提示。
我们点击Open,就可以启动我们的App了。
看图片的头部还有
back to safari 的字体。可能有的小伙班会说，这是一个网页什么的。那我么在双击home键。查看，后台开启的项目。
html5页面中打开本地app，如果没有跳转下载页面的解决方案
ios 使用Safari浏览器跳转打开、唤醒app
iOS/Android 微信及浏览器中唤起本地APP
从web页面打开iOS应用
iOS开发如何使用Safari浏览器打开app
iOS/Android 浏览器(h5)及微信中唤起本地APP
iOS微信浏览器直接打开App
没有更多推荐了，4添加评论分享收藏感谢收起赞同 2添加评论分享收藏感谢收起iOS中使用schema协议调用APP和使用iframe打开APP的例子
转载 &更新时间：日 08:48:54 & 投稿：junjie
这篇文章主要介绍了iOS中使用schema协议调用APP和使用iframe打开APP的例子,用在浏览器中打开APP,需要的朋友可以参考下
在iOS中，需要调起一个app可以使用schema协议，这是iOS原生支持的，并且因为iOS系统中都不能使用自己的浏览器内核，所以所有的浏览器都支持，这跟android生态不一样，android是可以自己搞内核的，但是iOS不行。
在iOS中提供了两种在浏览器中打开APP的方法：Smart App Banner和schema协议。
Smart App Banner
即通过一个meta 标签，在标签上带上app的信息，和打开后的行为，例如：app-id之类的，代码形如：
代码如下:&meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL"&
具体可以看下开发文档：
今天Smart APP Banner不是我们的主角，我们说的是schema
使用schema URL来打开iOS APP
schema类似自定义url协议，我们可以通过自定义的协议来打开自己的应用，形如：
myapplink://
# 例如 facebook的
# itunes的
itms-apps://
# 还有短信也是类似的
如果要打开一个app，最简单的方式是通过一个链接，如我们在html中这样写：
&a href="myapplink://"&打开我的app&/a&
当用户点击链接的时候就可以打开对应的app。
绑定click事件
但是实际中我们更多的情况是绑定事件，比如做个弹层啥的，不能一味的用a标签啊，所以可以通过两种方式来解决：location.href和iframe。
iframe的方式是开发中常用的，但是他也有一些问题：
1.我们没很好的方式来判断是否打开了app
2.会引起history变化
3.因为引起history变化，所以一些webview会有问题，比如：我查查，打开一个页面，如果有iframe，选择在safari中打开，实际打开的是iframe的页面
4.如果页面暴漏给了android系统，那么也会出现页面打不开，之类的问题
5.如果没有app，调起不成功，ios的safari会自己弹出一个对话框：打不开网址之类的提示
所以现在的问题是：如何知道iframe已经打开了某个app，即解决iframe打开app回调。
&使用iframe在iOS系统中打开app
聪明的你可能想到了，iframe的onload事件啊，可是遗憾的说，无效！所以我们找到了定时器（setTimeout），通过一个定时器，如果在一段时间内（比如500ms），当点击了按钮（记录time1），页面没有切走（调起app之后，页面进程会被中断），进程中断，那么计时器也会中断，这时候应该不会触发timer，如果调起失败，那么timer会就触发，我们判断下在一定时间内如果页面没有被切走，就认为调起失败。
另外通过timer触发时候的timer2，做差，判断是否太离谱了（切走了之后的时间应该比timer实际定时的500ms要长）：
function openIos(url, callback) {
&&& if (!url) {
&&& var node = document.createElement('iframe');
&&& node.style.display = 'none';
&&& var body = document.
&&& var clear = function(evt, isTimeout) {
&&&&&& (typeof callback==='function') &&& callback(isTimeout);
&&&&&&& if (!node) {
&&&&&&&&&&&
&&&&&&& node.onload =
&&&&&&& body.removeChild(node);
&&&&&&& node =
&&& var hide = function(e){
&&&&&&& clearTimeout(timer);
&&&&&&& clear(e, false);
&&& node.onload =
&&& node.src =
&&& body.appendChild(node);
&&& var now = +new Date();
&&& //如果事件失败，则1秒设置为空
&&& timer = setTimeout(function(){
&&&&&&& var newTime = +new Date();
&&&&&&&&& if(now-newTime&600){
&&&&&&&&&&& //因为切走了，在切回来需要消耗时间
&&&&&&&&&&& //所以timer即使执行了，但是两者的时间差应该跟500ms有较大的出入
&&&&&&&&&&& //但是实际并不是这样的！
&&&&&&&&&&& clear(null, false);
&&&&&&&&& }else{
&&&&&&&&&&& clear(null, true);
&&&&&&&&& }
&&& }, 500);
看上去方法很靠谱，但是现实总是那么的残酷！
不同的浏览器app（包括webview），都有自己在后台的常驻时间，即：假如一个浏览器他在被切走之后，后台常驻10s，那么我们设置定时器5s过期就是徒劳的，而且5s的定时器，用户要空等5s！交互也不让你这样干啊！
最后我们想到了pageshow和pagehide事件，即如果浏览器被切走到了要打开的app，应该会触发浏览器的pagehide事件，而从app重新返回到浏览器，就会触发pageshow方法。
但是经过代码测试发现，在uc、chrome中，不会触发pagehide和pageshow的方法，而在safari中可以的。
1.使用iframe调用schema URL
2.使用定时器判断在一段时间内是否调起成功
3.使用pageshow和pagehide来辅助定时器做更详细的判断
4.定时器中如果有alert可能不会被弹出，这一点很吃惊！后面的dom竟然5.执行了，但是alert没弹出，可能跟alert的实现有关系吧
6.在实验中我使用了两个定时器，是因为切回浏览器之后，有时候timeout触发要在pagehide和pageshow之前
7.计算timer实际执行时间差，也是不靠谱的
最后附上研究的代码，算是比较靠谱的方法了，虽然还是有一定的失败（第三方浏览器pagehide和pageshow不触发）：
&p&&button id="btn"&点我点我啊！alert，不会弹出&/button&&/p&
&p&&button id="btn2"&点我点我啊！alert2，虽然有alert和info，info执行，但是alert不弹出&/button&&/p&
&p&&button id="btninfo"&点我点我啊！info可以&/button&&/p&
$(function(){
& var $info = $('#info');
& function info(msg){
&&& var p = $('&p&'+msg+'&/p&');
&&& $info.append(p);
& $('#btn').on('click', function(){
&&& openIos('baiduboxapp://', function(t){
&&&&& if(t){
&&&&&&& alert('timeout or no baidu APP');
&&&&& }else{
&&&&&&& alert('invoke success');
& $('#btn2').on('click', function(){
&&& openIos('baiduboxapp://', function(t){
&&&&& if(t){
&&&&&&& info('timeout or no baidu APP2');
&&&&&&& alert('timeout or no baidu APP2');
&&&&& }else{
&&&&&&& info('invoke success2');
&&&&&&& alert('invoke success2');
& $('#btninfo').on('click', function(){
&&& openIos('baiduboxapp://', function(t){
&&&&& if(t){
&&&&&&& info('timeout or no baidu APP');
&&&&& }else{
&&&&&&& info('invoke success');
function openIos(url, callback) {
&&& if (!url) {
&&& var node = document.createElement('iframe');
&&& node.style.display = 'none';
&&& var body = document.
&&& var clear = function(evt, isTimeout) {
&&&&&& (typeof callback==='function') &&& callback(isTimeout);
&&&&&&& window.removeEventListener('pagehide', hide, true);
&&&&&&& window.removeEventListener('pageshow', hide, true);
&&&&&&& if (!node) {
&&&&&&&&&&&
&&&&&&& node.onload =
&&&&&&& body.removeChild(node);
&&&&&&& node =
&&& var hide = function(e){
&&&&&&& clearTimeout(timer);
&&&&&&& clear(e, false);
&&& window.addEventListener('pagehide', hide, true);
&&& window.addEventListener('pageshow', hide, true);
&&& node.onload =
&&& node.src =
&&& body.appendChild(node);
&&& var now = +new Date();
&&& //如果事件失败，则1秒设置为空
&&& timer = setTimeout(function(){
&&&&&&& timer = setTimeout(function(){
&&&&&&&&& var newTime = +new Date();
&&&&&&&&& if(now-newTime&1300){
&&&&&&&&&&& clear(null, false);
&&&&&&&&& }else{
&&&&&&&&&&& clear(null, true);
&&&&&&&&& }
&&&&&&& }, 1200);
&&& }, 60);
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具iOS Safari閲岋紝鑾峰彇缃戦〉绐楀彛鐨勬?纭?珮搴