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 相关文章推荐
JavaScript编程开发中的五个实用小技巧
Jul 22 Javascript
通过隐藏iframe实现文件下载的js方法介绍
Feb 26 Javascript
js实现汉字排序的方法
Jul 23 Javascript
详解jQuery中的empty、remove和detach
Apr 11 Javascript
详解AngularJS用Interceptors来统一处理HTTP请求和响应
Jun 08 Javascript
详解webpack解惑:require的五种用法
Jun 09 Javascript
Bootstrap响应式导航由768px变成992px的实现代码
Jun 15 Javascript
使用selenium抓取淘宝的商品信息实例
Feb 06 Javascript
node.js基础知识小结
Feb 26 Javascript
vue-router中的hash和history两种模式的区别
Jul 17 Javascript
jquery登录的异步验证操作示例
May 09 jQuery
JavaScript实现简易聊天对话框(加滚动条)
Feb 10 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+mysql留言本源码
2009/11/11 PHP
php创建基本身份认证站点的方法详解
2013/06/08 PHP
php中数据库连接方式pdo和mysqli对比分析
2015/02/25 PHP
js类中获取外部函数名的方法
2007/08/19 Javascript
Google韩国首页图标动画效果
2007/08/26 Javascript
Javascript 二维数组
2009/11/26 Javascript
myFocus slide3D v1.1.0 使用方法与下载
2011/01/12 Javascript
Javascript引用指针使用介绍
2012/11/07 Javascript
用js设置下拉框为只读的小技巧
2014/04/10 Javascript
JavaScript提升性能的常用技巧总结【经典】
2016/06/20 Javascript
javascript加载xml 并解析各节点的值(实现方法)
2016/10/12 Javascript
扩展Bootstrap Tooltip插件使其可交互的方法
2016/11/07 Javascript
jQuery文字轮播特效
2017/02/12 Javascript
浅谈 Vue v-model指令的实现原理
2017/06/08 Javascript
2种简单的js倒计时方式
2017/10/20 Javascript
使用Vue 实现滑动验证码功能
2019/06/27 Javascript
利用Python实现网络测试的脚本分享
2017/05/26 Python
python的unittest测试类代码实例
2017/12/07 Python
python psutil库安装教程
2018/03/19 Python
解决Django中多条件查询的问题
2019/07/18 Python
python的re模块使用方法详解
2019/07/26 Python
python创建子类的方法分析
2019/11/28 Python
python 计算方位角实例(根据两点的坐标计算)
2020/01/17 Python
python 生成器需注意的小问题
2020/09/29 Python
Django用内置方法实现简单搜索功能的方法
2020/12/18 Python
怎样比较两个类型为String的字符串
2016/08/17 面试题
大学生物业管理求职信
2013/10/24 职场文书
排查整治工作方案
2014/06/09 职场文书
有关环保的标语
2014/06/13 职场文书
公司董事长助理工作职责
2014/07/12 职场文书
2014年城市管理工作总结
2014/12/02 职场文书
2016年社会主义核心价值观心得体会
2016/01/21 职场文书
读《推着妈妈去旅行》有感1500字
2019/10/15 职场文书
python字典进行运算原理及实例分享
2021/08/02 Python
Mybatis-plus配置分页插件返回统一结果集
2022/06/21 Java/Android
微信小程序纯CSS实现无限弹幕滚动效果
2022/09/23 HTML / CSS