首页 / HTML / H5的页面中怎样调用APP功能
H5的页面中怎样调用APP功能
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了H5的页面中怎样调用APP功能,小编现在分享给大家,供广大互联网技能从业者学习和参考。文章包含1713字,纯文字阅读大概需要3分钟。
内容图文
![H5的页面中怎样调用APP功能](/upload/InfoBanner/zyjiaocheng/393/f50b04d57eb54a01a3b6b8accfdf8e78.jpg)
在市面上经常见到这种功能现如今应该非常普遍了,淘宝H5,知乎H5等等。。。
点击后会调起APP或者打开下载页面或者直接进行下载。
但是我这里发现知乎的这个功能有点不一样
他的逻辑是先提示我是否打开手机中的知乎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来做兼容。
相信看了这些案例你已经掌握了方法,更多精彩请关注Gxl网其它相关文章!
相关阅读:
HTML 5之新增的特性该如何使用
HTML的table鼠标拖拽排序该如何实现
html怎样实现页面跳转时传递参数
以上就是H5的页面中怎样调用APP功能的详细内容,更多请关注Gxl网其它相关文章!
内容总结
以上是互联网集市为您收集整理的H5的页面中怎样调用APP功能全部内容,希望文章能够帮你解决H5的页面中怎样调用APP功能所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错,欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 gblab@vip.qq.com 举报,一经查实,本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。