HTML5页面中尝试调起APP功能


Posted in HTML / CSS onSeptember 12, 2017

在市面上经常见到这种功能现如今应该非常普遍了,淘宝H5,知乎H5等等。。。

HTML5页面中尝试调起APP功能 HTML5页面中尝试调起APP功能

点击后会调起APP或者打开下载页面或者直接进行下载。

但是我这里发现知乎的这个功能有点不一样

他的逻辑是先提示我是否打开手机中的知乎APP(浏览器的机制询问用户操作许可),然后接着又弹出下载的提示。

HTML5页面中尝试调起APP功能 HTML5页面中尝试调起APP功能

解决方案URL scheme

URL scheme的方式在IOS和安卓都支持,兼容性较好。

优先使用iframe的方式

伪代码如下:

const iframe = document.createElement('iframe');
iframe.src = 'URL scheme'; // URL scheme的方式跳转
iframe.style.display = 'none';
document.body.appendChild(iframe);

这时候如果在一切环境支持的情况下,就会唤醒APP了。

但是这是理想情况下,更多的是要做兼容处理这快逻辑。

有些系统会拦截iframe的src(这只是造成唤醒APP失败的其中一种原因),因为这个src属性是一个法外hacker,很多漏洞都是利用他造成的。

所以这时候就要判断调APP失败的情况了。

伪代码如下:

const timer = 1000;
setTimeout(function() {
        // 执行成功后移除iframe
    document.body.removeChild(iframe);
    //setTimeout小于2000通常认为是唤起APP失败 
    if (Date.now() - last < 2000) {
            // 执行失败函数
            // 这里需要考虑一下之前知乎遇到的那个问题(浏览器询问导致时间小于2S)
    } else {
           //  执行成功函数
        }
}, timer);

理解:

  • 如果唤起成功,H5页面会被切换到后台,计时器就会延迟。即使用户再从app切换到H5页面,这个时间差必然也是大于2S的。
  • 如果唤起失败,定时器会准时执行(即使会有100ms的延迟也是够了),这时候必然是小于2S的。

在iframe被拦截的情况下,我们可以使用window.location.href = URL scheme来做兼容。

总结

以上所述是小编给大家介绍的HTML5页面中尝试调起APP功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

HTML / CSS 相关文章推荐
45个非常奇妙的CSS3 特性应用示例
Jan 01 HTML / CSS
css3制作动态进度条以及附加jQuery百分比数字显示
Dec 13 HTML / CSS
css3闪亮进度条效果实现思路及代码
Apr 17 HTML / CSS
一款纯css3实现的漂亮的404页面的实例教程
Nov 27 HTML / CSS
分享CSS3制作卡片式图片的方法
Jul 08 HTML / CSS
HTML5 video视频字幕的使用和制作方法
May 03 HTML / CSS
关于HTML5你必须知道的28个新特性,新技巧以及新技术
May 28 HTML / CSS
HTML5 实现一个访问本地文件的实例
Dec 13 HTML / CSS
html5的画布canvas——画出简单的矩形、三角形实例代码
Jun 09 HTML / CSS
HTML5 虚拟键盘出现挡住输入框的解决办法
Feb 14 HTML / CSS
详解canvas绘制多张图的排列顺序问题
Jan 21 HTML / CSS
HTML5中input输入框默认提示文字向左向右移动的示例代码
Sep 10 HTML / CSS
html5使用canvas实现弹幕功能示例
Sep 11 #HTML / CSS
基于HTML5+CSS3实现简单的时钟效果
Sep 11 #HTML / CSS
html5超简单的localStorage实现记住密码的功能实现
Sep 07 #HTML / CSS
HTML5本地存储和本地数据库实例详解
Sep 05 #HTML / CSS
浅谈html5之sse服务器发送事件EventSource介绍
Aug 28 #HTML / CSS
HTML5实现可缩放时钟代码
Aug 28 #HTML / CSS
HTML5操作WebSQL数据库的实例代码
Aug 26 #HTML / CSS
You might like
fetchAll()与mysql_fetch_array()的区别详解
2013/06/05 PHP
PHP内核探索:变量概述
2014/01/30 PHP
ThinkPHP登录功能的实现方法
2014/08/20 PHP
PHP利用header跳转失效的解决方法
2014/10/24 PHP
PHP的Yii框架中View视图的使用进阶
2016/03/29 PHP
swoole和websocket简单聊天室开发
2017/11/18 PHP
PHP For循环字母A-Z当超过26个字母时输出AA,AB,AC
2020/02/16 PHP
jQuery下的几个你可能没用过的功能
2010/08/29 Javascript
js显示时间 js显示最后修改时间
2013/01/02 Javascript
javascript中的self和this用法小结
2014/02/08 Javascript
node.js实现逐行读取文件内容的代码
2014/06/27 Javascript
JavaScript 面向对象与原型
2015/04/10 Javascript
基于JQuery和CSS3实现仿Apple TV海报背景视觉差特效源码分享
2015/09/21 Javascript
解决JS无法调用Controller问题的方法
2015/12/31 Javascript
使用伪命名空间封装保护独自创建的对象方法
2016/08/04 Javascript
JS实现数组去重复值的方法示例
2017/02/18 Javascript
浅谈webpack编译vue项目生成的代码探索
2017/12/11 Javascript
JS/HTML5游戏常用算法之路径搜索算法 A*寻路算法完整实例
2018/12/14 Javascript
JavaScript Tab菜单实现过程解析
2020/05/13 Javascript
[01:17:55]VGJ.T vs Mineski 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/20 DOTA
为Python的web框架编写前端模版的教程
2015/04/30 Python
python实现上传下载文件功能
2020/11/19 Python
python 列表转为字典的两个小方法(小结)
2019/06/28 Python
详解python3中用HTMLTestRunner.py报ImportError: No module named 'StringIO'如何解决
2019/08/27 Python
python使用PIL和matplotlib获取图片像素点并合并解析
2019/09/10 Python
浅谈matplotlib默认字体设置探索
2021/02/03 Python
video结合canvas实现视频在线截图功能
2018/06/25 HTML / CSS
美国农场鲜花速递:The Bouqs
2018/07/13 全球购物
String这个类型的class为何定义成final?
2012/11/13 面试题
部队万能检讨书
2014/02/20 职场文书
二年级学生评语大全
2014/04/23 职场文书
2015年维修电工工作总结
2015/04/25 职场文书
2015年物资管理工作总结
2015/05/20 职场文书
党支部半年考察意见
2015/06/01 职场文书
2015年街道办事处团委工作总结
2015/10/14 职场文书
如何用python识别滑块验证码中的缺口
2021/04/01 Python