JS拉起或下载app的实现代码


Posted in Javascript onFebruary 22, 2017

产品提了个需求,通过手机网页判断是否安装了自己公司app,如果安装了则拉起app,没有安装则跳转到下载页。

经过各种查阅资料尝试总结了一个还算可以的办法。

拉起app的原理就是js和原生统一好一个地址,例如(qiyimobile://self/qiyi.madeindexpage)。然后浏览器发起请求,如果app安装了则会拦截这个请求并且打开。

下面是安卓代码配置。其实scheme和host要和js这边统一

<span style="font-size:18px;"><intent-filter> 
        <action android:name="android.intent.action.VIEW" /> 
        <category android:name="android.intent.category.DEFAULT" /> 
        <category android:name="android.intent.category.BROWSABLE" /> 
        <data  
      android:scheme="qiyimobile"  
      android:host="self/qiyi.madeindexpage"  
      android:pathPrefix="/**"> 
     </data> 
</intent-filter></span>

js这边稍微麻烦一些。如果只拉起app比较简单,直接通过a连接或者window.location.href=“**”即可。不过这里有个问题,就是有些手机在未安装app的时候会识别我们之前定的那个协议尝试打开这个网页,当然会报找不到网页。这里用iframe的方式兼容性稍好。

var ifr = document.createElement('iframe');
 ifr.src = 'qiyimobile://self/qiyi.madeindexpage';
 document.body.appendChild(ifr);

当手机未安装app时应该跳转到下载页,很多人说延时一下直接跳转就行,如下

window.location.href=“打开地址”
 setTimeout(function() {  
  window.location.href=“下载地址”
      }, 500);

当然这样也是有问题的,因为有的手机拉起app也不会自动清除定时器,即无论是否安装app,页面都会在500ms后跳转到下载页。所以判断是否需要跳转到下载页是最麻烦的事。最终尝试如下是比较好的解决方法。

设置一个初始时间,打开拉起app地址后有个结束时间,计算两者之差,当差大于一定时间是说明安装了app,当差很小时说明没有打开app,需要跳转到下载页。

最终代码如下

downloadapp.addEventListener('click', function() {
      var start = new Date();//记录初始时间
      var t = 500;
      var ifr = document.createElement('iframe');
      ifr.src = 'qiyimobile://self/qiyi.madeindexpage';//打开app
      document.body.appendChild(ifr);
      ifr.onload = function() {
      };
      ifr.style.display='none';
      setTimeout(function() {
        document.body.removeChild(ifr);
        var end = new Date();//记录结束时间
        console.log(end - start)
        if (end - start <= (t + 30)) {//两者之差小于30ms时跳转到下载页
          window.location.href = "https://www.baidu.com"
        }
      }, t);
    })

以上所述是小编给大家介绍的JS拉起或下载app的实现代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JS 创建对象(常见的几种方法)
Nov 03 Javascript
jQuery简单验证上传文件大小及类型的方法
Jun 02 Javascript
JavaScript必知必会(五) eval 的使用
Jun 08 Javascript
详解JavaScript对象类型
Jun 16 Javascript
JavaScript 中有关数组对象的方法(详解)
Aug 15 Javascript
Javascript+CSS3实现进度条效果
Oct 28 Javascript
js实现界面向原生界面发消息并跳转功能
Nov 22 Javascript
详解javascript表单的Ajax提交插件的使用
Dec 29 Javascript
使用canvas进行图像编辑的实例
Aug 29 Javascript
JS获取月的第几周和年的第几周实例代码
Dec 05 Javascript
JQuery常见节点操作实例分析
May 15 jQuery
谈谈JavaScript令人迷惑的==与+
Aug 31 Javascript
js实现带简单弹性运动的导航条
Feb 22 #Javascript
bootstrap fileinput 插件使用项目总结(经验)
Feb 22 #Javascript
javascript 网页进度条简单实例
Feb 22 #Javascript
详解闭包解决jQuery中AJAX的外部变量问题
Feb 22 #Javascript
js实现PC端根据IP定位当前城市地理位置
Feb 22 #Javascript
纯JS实现轮播图
Feb 22 #Javascript
javascript 操作cookies详解及实例
Feb 22 #Javascript
You might like
PHP无限分类的类
2007/01/02 PHP
详解PHP中array_rand函数的使用方法
2016/09/11 PHP
PHP经典算法集锦【经典收藏】
2016/09/14 PHP
PHP实现的回溯算法示例
2017/08/15 PHP
PHP根据树的前序遍历和中序遍历构造树并输出后序遍历的方法
2017/11/10 PHP
PHP+Ajax实现的检测用户名功能简单示例
2019/02/12 PHP
PHP实现微信提现功能(微信商城)
2019/11/21 PHP
解决jquery .ajax 在IE下卡死问题的解决方法
2009/10/26 Javascript
JavaScript获取页面中表单(form)数量的方法
2015/04/03 Javascript
jquery模拟进度条实现方法
2015/08/03 Javascript
jQuery增加与删除table列的方法
2016/03/01 Javascript
深入理解JQuery中的事件与动画
2016/05/18 Javascript
json对象与数组以及转换成js对象的简单实现方法
2016/06/24 Javascript
关于Javascript中defer和async的区别总结
2016/09/20 Javascript
js窗口震动小程序分享
2016/11/28 Javascript
Bootstrap导航条学习使用(二)
2017/02/08 Javascript
nodejs调取微信收货地址的方法
2017/12/20 NodeJs
vue element 生成无线级左侧菜单的实现代码
2019/08/21 Javascript
微信小程序开发之获取用户手机号码(php接口解密)
2020/05/17 Javascript
Python实现的批量下载RFC文档
2015/03/10 Python
快速了解python leveldb
2018/01/18 Python
Python3实现购物车功能
2018/04/18 Python
Python 给某个文件名添加时间戳的方法
2018/10/16 Python
python将控制台输出保存至文件的方法
2019/01/07 Python
tensorflow pb to tflite 精度下降详解
2020/05/25 Python
python代码能做成软件吗
2020/07/24 Python
什么是Deployment descriptors;都有什么类型的部署描述符
2015/07/28 面试题
室内设计自我鉴定
2013/10/15 职场文书
大学生最常用的自我评价
2013/12/07 职场文书
安全检查验收制度
2014/01/12 职场文书
个人年终总结怎么写
2015/03/09 职场文书
妈妈再爱我一次观后感
2015/06/08 职场文书
安全知识竞赛主持词
2015/06/30 职场文书
CAD实训总结范文
2015/08/03 职场文书
观看安全警示教育片心得体会
2016/01/15 职场文书
详解Python牛顿插值法
2021/05/11 Python