用js实现点击链接跳转APP对应页面

这不是一篇严格意义上的原创,参考了很多大佬的文章, 下面根据自己的情况做了一下整理。

近两天,接到公司的需求----点击 H5 的购买按钮,跳转到 APP 对应的页面。啊! 一脸懵! 还等啥,赶紧查资料啊。

下面的描述分为两点:

  • js 的判断与跳转
  • URL Scheme 、Universal link 、App link 的区别

通过 js 判断与跳转的思路是这样的

  • 通过 let u = navigator.userAgent 判断浏览器的系统类型及版本信息
  • 通过 u.indexOf() 判断系统为 Android 还是 iOS
  • 如果是 Android 系统,则 u 含有的关键字段为 AndroidLinux
  • 如果是 iOS 系统,则 u 含有的关键字段为 Mac OS X
  • 设置时常为 3s 的定时器,如果可以打开 APP,则打开。如果不行,则 3s 后跳转到 APP 下载链接
  • 我对 iOS 系统做了一个处理,判断系统版本是否小于 9 ,若小于,则通过 URL Scheme 打开APP,否则用 Universal link ( iOS 9.0 以后支持 ) 打开。

上代码:

<!DOCTYPE html>
<html lang="en">
...
<body>
    <div id="box">点击打开app</div>
</body>
<script>
  • 1
    点赞
  • 22
    收藏
    觉得还不错? 一键收藏
  • 2
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值