html5唤起app的方法

这篇文章主要介绍了html5唤起app的方法的相关资料，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧

h5唤起app这种需求是常见的。在移动为王的时代，h5在app导流上发挥着重要的作用。

目前我们采用的唤起方式是url scheme(iOS，Android平台都支持)，只需原生APP开发时注册scheme， 那么用户点击到此类链接时，会自动跳到APP。

三种唤起方案

iframe

?


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

var last = Date.now(),

    doc = window.document,

    ifr = doc.createElement(‘iframe‘);

//创建一个隐藏的iframe

ifr.src = nativeUrl;

ifr.style.cssText = ‘display:none;border:0;width:0;height:0;‘;

doc.body.appendChild(ifr);

setTimeout(function() {

    doc.body.removeChild(ifr);

    //setTimeout回小于2000一般为唤起失败

    if (Date.now() - last < 2000) {

        if (typeof onFail == ‘function‘) {

            onFail();

        } else {

            //弹窗提示或下载处理等

        }

    } else {

        if (typeof onSuccess == ‘function‘) {

            onSuccess();

        }

    }

}, 1000);

iframe方案的唤起原理是: 程序切换到后台时，计时器会被推迟(计时器不准的又一种情况)。如果app被唤醒那么网页必然就进入了后台，如果用户从app切回来，那么时间一般会超过2s;若app没有被唤起，那么网页不会进入后台，setTimeout基本准时触发，那么时间不会超过2s。

window.location.href直接跳转

?


1

window.location.href = nativeUrl;

a标签唤起

?


1

<a href="nativeUrl">唤起app</a>

三种唤起方案的浏览器测试

  1. X表示唤起失败，√表示唤起成功
  2. 红色标记表示进入页面直接唤起，绿色表示人工事件操作后唤起
  3. ios测试机:iphone 6p;android测试机:小米1s

iframe唤起app测试结果

window.location.href唤起app测试结果

a标签唤起app测试结果

iframe和window.location.href唤起对比

iframe、window.location.href和a标签唤起三者对比

测试结果分析

首先测试的机型和浏览器有限，上述结果仅作参考.

对比iframe唤起和location.href，我们可以发现：

  1. 对于ios来说，location.href跳转更合适，因为这种方式可以在Safari中成功唤起app。Safari作为iphone默认浏览器其重要性就不用多说了，而对于微信和qq客户端，ios中这两种方式都没有什么卵用==
  2. 对于Android来说，在进入页面直接唤起的情况下，iframe和location.href是一样的，但是如果是事件驱动的唤起，iframe唤起的表现比location.href要更好一点。
  3. 通过测试可以发现，进入页面直接唤起和事件驱动的唤起，对于很多浏览器，两者的表现是不同的，简单来说，直接唤起的失败更多。

通过上述对比分析，Android使用iframe唤起，ios采用window.location.href唤起更合适一点。

进入页面直接唤起和事件驱动唤起的区别

这两种唤起场景在Android中有明显的区别，无论是iframe的方式唤起还是location.href,以小米1s的chrome为例:


1

<a id="goApp" href="javascript:void(0);">点我打开APP</a>

绑定事件 人工驱动唤起：


1

2

3

4

5

6

7

//成功唤起

window.onload = function () {

    $(‘#goApp‘).on("click", function () {

        window.lib.callapp("nativeUrl");//iframe

        //window.location.href = nativeUrl;

    });

};

进入页面直接唤起：


1

2

3

4

5

//唤起失败

window.onload = function () {

    window.lib.callapp("nativeUrl");//iframe

    //window.location.href = nativeUrl;

};

绑定事件，js唤起

?


1

2

3

4

5

6

7

8

9

//唤起失败

window.onload = function () {

    $(‘#goApp‘).on("click", function () {

        window.lib.callapp("nativeUrl");//iframe

        //window.location.href = nativeUrl;

    });

    $(‘#goApp).trigger(‘click‘);

};

原本我以为$(‘#goApp).trigger(‘click‘);的方式和人工点击是一样的，而实际表现是，js触发事件的表现和页面直接跳转一样无效。

从参考的博文中看到 Android平台和各个app厂商差异很大，比如Chrome从25及以后就不再支持通过js触发（非用户点击），设置iframe src地址等来触发scheme跳转。所以js触发和直接用户点击区别还是很大的，跟音频播放的限制异曲同工吧。

最后

经过上述的测试和分析，基本敲定ios用window.location.href的方式唤起比较合适，Android用iframe唤起比较合适。我们在使用iframe唤起时，一般对唤起失败的处理是直接下载，但是这里就有一个问题，就是浏览器无法检测到唤起是否成功，即，如果我唤起成功后返回浏览器，浏览器还是会弹出下载信息，这个体验很差。当然我们也需要处理一些成功或失败的回调函数，说不定我们的场景只需要唤起而并不需要失败后的下载呢。

关于使用location.href唤起iphone手机上的原生app，跳转中间页的处理方式可能也比当前页直接处理更好一点。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

原文地址：https://www.cnblogs.com/zunzunQ/p/10857028.html

时间： 2024-10-26 13:55:21

html5唤起app的方法的相关文章

(转)html5唤起app的方法

这篇文章主要介绍了html5唤起app的方法的相关资料,觉得挺不错的,现在分享给大家,也给大家做个参考.一起来看看吧 感觉不错的话就帮助顶起来吧h5唤起app这种需求是常见的.在移动为王的时代,h5在app导流上发挥着重要的作用.目前我们采用的唤起方式是url scheme(iOS,Android平台都支持),只需原生APP开发时注册scheme, 那么用户点击到此类链接时,会自动跳到APP.三种唤起方案iframevar last = Date.now(),     doc = window.

Html5 Web App 手机跨平台开发笔记

APP 开发平台包括Android 平台开发,Mac os X 平台开发以及Windows Phone 7平台开发.开发的程序都只能在各自手机系统上运行,如果开发出一种程序,能再以上任何系统上运行,那是多么美好的事情.而Html5 Mobile Web App就是其中一种跨平台方法.下面是相关知识的介绍 1.背景 HTML5是HTML的最新标准,HTML5的草案已经于2008年发布,目前W 3 C(万维网联盟)正在对此进行进一步完善.对许多人来说,早该进行这种改进了.十多年来,HTML一直没有进

H5唤起app

H5唤起app 1.判断是否在微信中打开 无论是在哪个平台的客户端Android/IOS,在微信的平台上访问都有一个问题,那就是无法启动客户端,这是微信为了安全性考虑的限制,android这边屏蔽schema协议,除非公司是微信的伙伴加入了白名单才能使用,IOS系统可以去访问app对应appstore的下载页,但是微信经常屏蔽appstore的这个网址,进而访问不到.比较方便的做法就是在微信浏览器中,无论是IOS还是android都去应用宝的下载(IOS 这边最后会到appstore中)页面打开

js在微信、微博、QQ、Safari唤起App的解决方案

背景 最近在做微信.QQ.微博中使用js唤起App,之前也做过类似的功能,不过比较粗糙,考虑的情况不太全,而且那已经是很久之前的事情了,很多技术都已过时,现在有体验更好,功能更加完善的唤起技术,之前的很多的方案,到了现在都已是不太必要了,现在通过这篇文章分享给大家一个全面的.最新的唤起方案,希望对大家有帮忙. 最终实现的效果 用户点击H5页面的打开App或者下载按钮(这个按钮可能在一个下载入口页.各种分享页面的吸顶或吸底的banner),如果用户已经安装了App,则根据业务跳转到相应的Nativ

phonegap+html5开发app的一些总结

1.Css3圆角白边:使用css3圆角效果时,在android某些机器上会产生白边,所以应该在圆角的div外套一个div(背景色和外部相同),然后有圆角效果的div 内部使用自己的背景色 border-radius:5px; box-shadow:inset 0 2px 5px #e1e1e1; <div style=””> <div style=”border-radius:5px;box-shadow:inset 0 2px 5px #e1e1e1;”> </div>

web app与app的区别，即html5与app的区别

公司准备要做一个项目,是p2p配资的app.在网上问了一些人后,发现有的是直接有html5做好后,用软件封装的.之前我学过app的开发,当时Android版本的,知道开发Android app时写的代码.那么问题来了: html5封装的app与原生态app有什么区别呢? html5又和app有什么区别呢? 为什么大型网络公司还是倾向于推广原生态app呢? html5是有跨平台的优势,但是为什么还是不温不火,或者我们仍称之为轻应用app呢? 查找了相关的资料,梳理了一下,发现有如下区别: 1.ht

HTML5手机APP开发入(3)

HTML5手机APP开发入(3) 课程内容: 按照AngularJs MVC框架进行代码重构,新建一个DataService服务类使用SQLite插件实现储存对通讯录的本地存储. 涉及的知识点: Angular2 Injectable的使用熟成的模块依赖注入 引用类库 引用SQLite插件和 Storage,SqlStorage模块 重构代码 新建一个Model 新建一个modules目录,新建一个contact.ts,定义一下字段的类型 新建一个dataService 引用类或plugin p

让ie浏览器支持html5标签的实现方法

Html5已经风靡很久了,不研究html5+css3实在有些过不去,今天先从最基本的开始介绍吧,让ie家族老前辈能够认识html5的新标签.前端资源分享 1.页面中加入代码 .代码   <!--[if lt IE 9]> <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> 2.定义一下CSS代码(Important)

H5按钮唤起APP应用（IOS）或跳转至APPstore

昨天刚到公司收到了内部邮件,让调研是否可以由H5页面直接唤起APP.因为之前搞过这个东西,所以直接回复可以唤起,但是与前端联调时,遇到了种种的坎,所以今天特此记录一下,方便以后使用. 首先H5唤起APP,需要在H5和APP中进行不同的设置. 原理说明 首先需要说明,不管iOS还是Android,浏览器都不可能预知本地是否安装了某个APP的.或者更严谨地说,我们不能通过浏览器来预知本地是否安装.因为就算浏览器可以读取本地应用的安装列表,但是目前也没任何一家浏览器提供查询的API,所以这条路是走不通