文档章节

iOS中使用schema协议调用APP和使用iframe打开APP的例子

BearCatYN
 BearCatYN
发布于 2015/06/12 11:26
字数 1546
阅读 2278
收藏 6
点赞 0
评论 1

在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">

具体可以看下开发文档:https://developer.apple.com/library/ios/documentation/AppleApplications/Reference/SafariWebContent/PromotingAppswithAppBanners/PromotingAppswithAppBanners.html
今天Smart APP Banner不是我们的主角,我们说的是schema

使用schema URL来打开iOS APP

schema类似自定义url协议,我们可以通过自定义的协议来打开自己的应用,形如:

myapplink://

# 例如 facebook的

fb://

# itunes的

itms-apps://

# 还有短信也是类似的

sms://

如果要打开一个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) {

        return;

    }

    var node = document.createElement('iframe');

    node.style.display = 'none';

    var body = document.body;

    var timer;

    var clear = function(evt, isTimeout) {

       (typeof callback==='function') &&  callback(isTimeout);

        if (!node) {

            return;

        }

        node.onload = null;

        body.removeChild(node);

        node = null;  
     };

    var hide = function(e){

        clearTimeout(timer);

        clear(e, false);

    };

    node.onload = clear;

    node.src = url;

    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不触发):

 <button id="btn">点我点我啊!alert,不会弹出</button> 

 <button id="btn2">点我点我啊!alert2,虽然有alert和info,info执行,但是alert不弹出</button> 

 <button id="btninfo">点我点我啊!info可以</button>   
 $(function(){ 
   var $info = $('#info'); 
   function info(msg){

    var p = $(' '+msg+' ');

    $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) {

        return;

    }

    var node = document.createElement('iframe');

    node.style.display = 'none';

    var body = document.body;

    var timer;

    var clear = function(evt, isTimeout) {

       (typeof callback==='function') &&  callback(isTimeout);

        window.removeEventListener('pagehide', hide, true);

        window.removeEventListener('pageshow', hide, true);

        if (!node) {

            return;

        } 
         node.onload = null;

        body.removeChild(node);

        node = null; 
     };

    var hide = function(e){

        clearTimeout(timer);

        clear(e, false);

    };

    window.addEventListener('pagehide', hide, true);

    window.addEventListener('pageshow', hide, true);

    node.onload = clear;

    node.src = url;

    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);

}


本文转载自:http://www.jb51.net/article/54423.htm

共有 人打赏支持
BearCatYN
粉丝 27
博文 158
码字总数 11947
作品 0
朝阳
程序员
加载中

评论(1)

APP或网站/微信【注册决定成败】市场调查分析:目前80%的用户是因为注册短信验证码体验不佳,从而放弃注册!这是多么痛的领悟-----我公司是专业做短信验证码的供应商,6年间我们只做了一件事让每个用户注册短信验证码5秒到达,为近16000APP客户提供服务! 加我微-信: wkk-555 咨询,〔廖经理136-4173-0373〕!
【quickhybrid】H5和Native交互原理

前言 架构的核心就是交互,而实现这个交互的前提是弄清楚H5和Native端的交互 本文主要介绍Native端(Android/iOS)和H5端(泛指前端)的交互原理 (之前也整理过类似的文章,本系列重新梳理)...

dailc
07/01
0
0
IOS 内置URL schemes简介

在IOS的应用中经常会看到一些应用程序通过某个点击动作而直接跳到App Store页面,开始很奇怪这种第三方应用于IOS的系统应用交互时怎么实现的。后来发现苹果的开发者文档中关于这种通信的实现...

big军
2013/03/16
0
2
IOS工程自动打包并发布脚本实现

作者:webfrogs 转载请注明出处。 前言 IOS的开发过程中,当需要给测试人员发布测试包的时候,直接使用xcode来做的效率是非常低下的。尤其是当有一点小改动需要重新出包时,那简直是个折磨的...

孙哲
2015/03/26
0
6
如何采用Yeoman + Grunt + Bower开发基于PhoneGap的Hybrid APP

一直想开发手机应用,也跟着教程学做了两个iOS小应用,但开发思维上的转变需要一个长期的过程,而且iOS系统功能很强大,陌生的地方也很多,很多功能不知道该自己开发还是系统上已经存在,也不...

僵尸猫
2015/06/24
0
6
C++文件操作详解(ifstream、ofstream、fstream)

C++ 通过以下几个类支持文件的输入输出: ofstream: 写操作(输出)的文件类 (由ostream引申而来) ifstream: 读操作(输入)的文件类(由istream引申而来) fstream: 可同时读写操作的文件类 ...

JORDANSG
2012/12/02
0
0
iOS证书(.p12)和描述文件(.mobileprovision)申请

iOS有两种证书和描述文件: 证书类型 使用场景 开发(Development)证书和描述文件 用于开发测试,在HBuilder中打包后可在真机环境通过Safari调试 发布(Distribution)证书和描述文件 用于提交A...

-Man
2015/11/19
0
0
Core Location in i​OS 8

自从 iPhone 存在以来,位置服务就一直处于非常重要的位置。Maps.app 是第一代 iPhone 里杀手锏的功能之一。Core Location API 也在 iPhone OS SDK 最初的公开版本里就存在了。每一次发布 iO...

nerozhao
2015/05/29
0
0
iOS 终于支持了 PWA,一起来认识一下这个强化版「小程序」 | 科普

iOS 终于支持了 PWA,一起来认识一下这个强化版「小程序」 | 科普 发布于 2018-04-13 文章被以下专栏收录

少数派
07/06
0
0
C++文件读写详解(ofstream,ifstream,fstream)

在看C++编程思想中,每个练习基本都是使用ofstream,ifstream,fstream,以前粗略知道其用法和含义,在看了几位大牛的博文后,进行整理和总结: 这里主要是讨论fstream的内容: [java] view pl...

涩女郎
2015/08/19
0
0
学习如何针对iOS 7进行开发?

  iOS 7已经发布了六个测试版,除了beta 6进行了小幅修正外,其他几个测试版都有不小的改动。昨天有消息说苹果将在9月10日发布iOS 7正式版,那么GM版很快将会与开发者见面。在iOS 7来临前夕...

fangzhou99
2013/09/17
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

用 Python 实现打飞机,让子弹飞吧!

所用技术和软件 python 2.7 pygame 1.9.3 pyCharm 准备工作 安装好 pygame 在第一次使用 pygame 的时候,pyCharm 会自动 install pygame。 下载好使用的素材。 技术实现 初始化 pygame 首先要...

猫咪编程
9分钟前
0
0
MySQL的行锁和表锁

简单总结一下行锁和表锁。 行锁 每次操作锁住一行数据。开销大,加锁慢;会出现死锁;锁定粒度最小,发生锁冲突的概率最低,并发度也最高。 表锁 每次操作锁住整张表。开销小,加锁快;不会出...

to_ln
12分钟前
0
0
Java IO类库之字节数组输入流ByteArrayInputStream

一、ByteArrayInputStream字节数组输入流介绍 ByteArrayInputStream是字节数组输入流,继承自InputStream。它的内部包含一个缓冲区,是一个字节数组,缓冲数组用于保存从流中读取的字节数据,...

老韭菜
13分钟前
0
0
iOS安全应该做哪些事情

1. 尽量使用HTTPS协议。 2. 密码提交的时候,密码使用SHA256加密后传输,MD5等经过哈希碰撞已经可以推算出原文。 3. 密码提交的时候,可以加盐。 4. 密码保存在本地的时候,尽量使用钥匙串保...

HOrange
20分钟前
0
0
react native 注意事项

1. 环境参考官网 android studio 必装 java jdk安装 1.8版本(环境建议自己一步一步配置,切记不要 apt ) 2.有改变编译内容发现 会白屏,然后APP消失,请卸载原来的测试 appinfo (连续两次...

304158
26分钟前
0
0
FOMO游戏代码解析

源代码在此处

怎当她临去时秋波那一转
31分钟前
1
0
EOS智能合约与DApp开发入门

EOS的是Block.One主导研发的一个区块链底层公链系统,它专门为支撑商业去中心化 应用(Decentralized Application)而设计,其代码开源。 比特币被称为区块链1.0,因为它开辟了数字加密货币的...

笔阁
43分钟前
1
0
编译cjson到dll

https://blog.csdn.net/mengzhisuoliu/article/details/52203724 编译完成后 是纯lua实现的json decode 的10倍以上...

梦想游戏人
53分钟前
0
0
JS基础- Date 对象

Date 对象 Date 对象用于处理日期和时间。 创建 Date 对象的语法: var myDate=new Date() 注释:Date 对象会自动把当前日期和时间保存为其初始值。 Date 对象属性 属性 描述 constructor 返...

ZHAO_JH
55分钟前
0
0
Python数据分析numpy(1)

Python开源的科学计算基础库 1.表示N维数组对象ndarray 2.线性代数、傅里叶变换、随机数生成 3.广播函数,整合c++、c 一.数据的维度 1.数据 2.数据维度 3.一维数据 (1)特点 (2)Python中的...

十年磨一剑3344
58分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部