H5页面中尝试调起APP实例代码

本文主要和大家分享h5页面中尝试调起app实例代码,希望能帮助到大家。

市面上常见的功能

这种功能现如今应该非常普遍了,淘宝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() {        // 执行成功后移除iframedocument.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来做兼容。

相关推荐:

关于H5页面的10篇文章推荐

关于H5页面的10篇文章推荐

关于H5页面的10篇文章推荐

以上就是H5页面中尝试调起APP实例代码的详细内容,更多请关注【创想鸟】其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/3125047.html

(0)
上一篇 2025年3月29日 19:37:47
下一篇 2025年3月29日 19:38:12

AD推荐 黄金广告位招租... 更多推荐

相关推荐

  • H5开发视频遇到的问题及解决方案

    最近做了一些嵌入视频的活动,积累了点视频方面的经验,下面记录下别人和自己踩过的坑以及相应的解决方案。1、碰到问题和解决方案1.1、ios 网页中播放视频默认全屏(点击视频会弹出播放器进行全屏播放)。解决不全屏播放可以添加下列属性webkit…

    编程技术 2025年3月29日
    100
  • HTML5实现移动页面自适应手机屏幕的方法

    1、使用meta标签:viewport H5移动端页面自适应普遍使用的方法,理论上讲使用这个标签是可以适应所有尺寸的屏幕的,但是各设备对该标签的解释方式及支持程度不同造成了不能兼容所有浏览器或系统。 viewport 是用户网页的可视区域。…

    编程技术 2025年3月29日
    100
  • HTML5调用百度地图API获取当前位置并直接导航目的地的方法

    本文主要和大家介绍了html5页面直接调用百度地图api获取当前位置直接导航目的地的实现代码,需要的朋友可以参考下,希望能帮助到大家。 可以省下先发送位置信息后,点确定再出导航,省一步, nbsp;html>            H…

    编程技术 2025年3月29日
    100
  • H5最全面解读

    这次给大家带来h5最全面解读,深入理解h5,使用h5的注意事项有哪些,下面就是实战案例,一起来看一下。 官方:HTML5概念 HTML5是用于取代1999年所制定的 HTML 4.01 和 XHTML 1.0 标准的 HTML 标准版本,现…

    编程技术 2025年3月29日
    100
  • HTML5的集合

    这次给大家带来html5的集合,使用html5的注意事项有哪些,下面就是实战案例,一起来看一下。 一、HTML5增加元素:      用于图形绘制,通过脚本(常用JS)来完成;具体请参考JavaScript;          矢量图,支持…

    编程技术 2025年3月29日
    100
  • H5怎样做出图片拖拽上传预览组件

    这次给大家带来H5怎样做出图片拖拽上传预览组件,H5做出图片拖拽上传预览组件的注意事项有哪些,下面就是实战案例,一起来看一下。 H5中拖拽事件有:[ – ] DragDrop:拖放完成,也就是鼠标拖入对象并在拖放区域释放。[ &…

    编程技术 2025年3月29日
    100
  • h5制作性能变化折线图

    这次给大家带来h5制作性能变化折线图,h5制作性能变化折线图的注意事项有哪些,下面就是实战案例,一起来看一下。 通过动态设置内部元素高度 =>     nbsp;html>                示例1     #tit…

    编程技术 2025年3月29日
    100
  • 在webstorm中使用H5的快捷键

    这次给大家带来在webstorm中使用h5的快捷键,在webstorm中使用h5快捷键的注意事项有哪些,下面就是实战案例,一起来看一下。 快速移动选种的代码,上下移动 往上移动: Ctrl + shift + ⬆️ (方向键上)往下移动: …

    编程技术 2025年3月29日
    100
  • 如何使用H5的dataset

    这次给大家带来如何使用h5的dataset,使用h5的dataset的注意事项有哪些,下面就是实战案例,一起来看一下。      HTML5标准允许你在普通的元素标签里,嵌入类似data-*的注意事项,来实现一些简单数据的存取。它的数量不受…

    编程技术 2025年3月29日
    100
  • Html5实现APP中监听返回事件如何处理

    本文主要和大家介绍了html5 app中监听返回事件处理的方法示例的相关资料,希望能帮助到大家。在使用mui框架的时候,我们经常会用到一个头部带有.mui-action-back的class。                        …

    编程技术 2025年3月29日
    100

发表回复

登录后才能评论