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 相关文章推荐
可缩放Reloaded-一个针对可缩放元素的复用组件
Mar 10 Javascript
如何快速的呈现我们的网页的技巧整理
Jul 01 Javascript
简介JavaScript中strike()方法的使用
Jun 08 Javascript
轻松使用jQuery双向select控件Bootstrap Dual Listbox
Dec 13 Javascript
JS组件系列之Bootstrap table表格组件神器【二、父子表和行列调序】
May 10 Javascript
微信小程序  网络请求API详解
Oct 25 Javascript
Node.js 实现简单小说爬虫实例
Nov 18 Javascript
js使用i18n实现页面国际化的方法
May 09 Javascript
JavaScript求一个数组中重复出现次数最多的元素及其下标位置示例
Jul 23 Javascript
node错误处理与日志记录的实现
Dec 24 Javascript
JS实现头条新闻的经典轮播图效果示例
Jan 30 Javascript
使用next.js开发网址缩短服务的方法
Jun 17 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中的(伪)多线程与多进程
2013/07/01 PHP
让CodeIgniter数据库缓存自动过期的处理的方法
2014/06/12 PHP
php+mysql实现用户注册登陆的方法
2015/01/03 PHP
php使用Cookie实现和用户会话的方法
2015/01/21 PHP
php使用Jpgraph绘制饼状图的方法
2015/06/10 PHP
PHP与Web页面的交互示例详解二
2020/08/04 PHP
JavaScript 事件对象的实现
2009/07/13 Javascript
在模板页面的js使用办法
2010/04/01 Javascript
基于jsTree的无限级树JSON数据的转换代码
2010/07/27 Javascript
Three.js源码阅读笔记(Object3D类)
2012/12/27 Javascript
解决extjs grid 不随窗口大小自适应的改变问题
2014/01/26 Javascript
JS 打印功能代码可实现打印预览、打印设置等
2014/10/31 Javascript
jQuery中DOM树操作之复制元素的方法
2015/01/23 Javascript
jQuery元素属性操作实例(设置、获取及删除元素属性)
2016/09/08 Javascript
BootStrap学习系列之布局组件(下拉,按钮组[toolbar],上拉)
2017/01/03 Javascript
JS中的三个循环小结
2017/06/20 Javascript
详解Vue.js自定义tipOnce指令用法实例
2018/12/19 Javascript
小程序云开发获取不到数据库记录的解决方法
2019/05/18 Javascript
vue实现页面滚动到底部刷新
2019/08/16 Javascript
使用typescript构建Vue应用的实现
2019/08/26 Javascript
vue新建项目并配置标准路由过程解析
2019/12/09 Javascript
Python计算两个日期相差天数的方法示例
2017/05/23 Python
Python常见排序操作示例【字典、列表、指定元素等】
2018/08/15 Python
python保存二维数组到txt文件中的方法
2018/11/15 Python
django 控制页面跳转的例子
2019/08/06 Python
详解解决Python memory error的问题(四种解决方案)
2019/08/08 Python
tensorflow-gpu安装的常见问题及解决方案
2020/01/20 Python
css3 实现元素弧线运动的示例代码
2020/04/24 HTML / CSS
html5中使用hotcss.js实现手机端自适配的方法
2020/04/23 HTML / CSS
伦敦香水公司:The London Perfume Company
2019/11/13 全球购物
上课说话检讨书大全
2014/01/22 职场文书
标准单位租车协议书
2014/09/23 职场文书
2015年妇联工作总结范文
2015/04/22 职场文书
诚信考试主题班会
2015/08/17 职场文书
经典励志格言:每日一句,让你每天充满能量
2019/08/16 职场文书
2021-4-5课程——SQL Server查询【3】
2021/04/05 SQL Server