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 相关文章推荐
CSS实现鼠标滑过鼠标点击代码写法
Dec 26 HTML / CSS
CSS3实现DIV圆角效果完整代码
Oct 10 HTML / CSS
实例讲解CSS3中的box-flex弹性盒属性布局
Jun 09 HTML / CSS
HTML5 canvas实现雪花飘落特效
Mar 08 HTML / CSS
HTML5 File API改善网页上传功能
Aug 19 HTML / CSS
Html5 FileReader实现即时上传图片功能实例代码
Sep 01 HTML / CSS
【HTML5】3D模型--百行代码实现旋转立体魔方实例
Dec 16 HTML / CSS
HTML5仿微信聊天界面、微信朋友圈实例代码
Jan 29 HTML / CSS
关于解决iframe标签嵌套问题的解决方法
Mar 04 HTML / CSS
老生常谈 使用 CSS 实现三角形的技巧(多种方法)
Apr 13 HTML / CSS
CSS3实现三角形不断放大效果
Apr 13 HTML / CSS
div与span之间的区别与使用介绍
Dec 06 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
全国FM电台频率大全 - 8 黑龙江省
2020/03/11 无线电
雄兵连三大错觉:凯莎没了,凉冰阵亡了,华烨觉得自己又行了
2020/04/09 国漫
用PHP实现小型站点广告管理(修正版)
2006/10/09 PHP
用文本文件制作留言板提示(下)
2006/10/09 PHP
openflashchart 2.0 简单案例php版
2012/05/21 PHP
ThinkPHP控制器详解
2015/07/27 PHP
php利用smtp类实现电子邮件发送
2015/10/30 PHP
thinkPHP5框架分页样式类完整示例
2018/09/01 PHP
javascript温习的一些笔记 基础常用知识小结
2011/06/22 Javascript
关于URL中的特殊符号使用介绍
2011/11/03 Javascript
javascript获取web应用根目录的方法
2014/02/12 Javascript
js全选实现和判断是否有复选框选中的方法
2015/02/17 Javascript
javascript实现简单的贪吃蛇游戏
2015/03/31 Javascript
jquery仿百度经验滑动切换浏览效果
2015/04/14 Javascript
jQuery实现可编辑的表格实例讲解(2)
2015/09/17 Javascript
JS实现字符串转日期并比较大小实例分析
2015/12/09 Javascript
AngularJS 模块化详解及实例代码
2016/09/14 Javascript
微信小程序 页面跳转传参详解
2016/10/28 Javascript
基于rem的移动端响应式适配方案(详解)
2017/07/07 Javascript
利用express启动一个server服务的方法
2017/09/17 Javascript
vue+element-ui集成随机验证码+用户名+密码的form表单验证功能
2018/08/05 Javascript
vue分页插件的使用方法
2019/12/25 Javascript
vuex(vue状态管理)的特殊应用案例分享
2020/03/03 Javascript
Node.js+Vue脚手架环境搭建的方法步骤
2020/03/08 Javascript
[01:05]主宰至宝剑心之遗
2017/03/16 DOTA
Pyhton中单行和多行注释的使用方法及规范
2016/10/11 Python
Python编写登陆接口的方法
2017/07/10 Python
详解将Pandas中的DataFrame类型转换成Numpy中array类型的三种方法
2019/07/06 Python
用Python实现BP神经网络(附代码)
2019/07/10 Python
Pyecharts 动态地图 geo()和map()的安装与用法详解
2020/03/25 Python
Python调用系统命令os.system()和os.popen()的实现
2020/12/31 Python
世界上最全面的汽车零部件和配件集合:JC Whitney
2016/09/04 全球购物
美国一家主打母婴用品的团购网站:zulily
2017/09/19 全球购物
任命书格式范文
2015/09/22 职场文书
python通配符之glob模块的使用详解
2021/04/24 Python
SQL 窗口函数实现高效分页查询的案例分析
2021/05/21 SQL Server