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 相关文章推荐
JQuery动画和停止动画实例代码
Mar 01 Javascript
从js向Action传中文参数出现乱码问题的解决方法
Dec 29 Javascript
jQuery+Ajax+PHP弹出层异步登录效果(附源码下载)
May 27 Javascript
Angular中实现树形结构视图实例代码
May 05 Javascript
jQuery动态添加.active 实现导航效果代码思路详解
Aug 29 jQuery
浅析Javascript中双等号(==)隐性转换机制
Oct 27 Javascript
基于JavaScript实现报警器提示音效果
Oct 27 Javascript
微信小程序通过保存图片分享到朋友圈功能
May 24 Javascript
webpack4+Vue搭建自己的Vue-cli项目过程分享
Aug 29 Javascript
JS拖动选择table里的单元格完整实例【基于jQuery】
May 28 jQuery
微信小程序 scroll-view 实现锚点跳转功能
Dec 12 Javascript
jQuery实现视频展示效果
May 30 jQuery
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
实例(Smarty+FCKeditor新闻系统)
2007/01/02 PHP
用mysql触发器自动更新memcache的实现代码
2009/10/11 PHP
PHPUnit PHP测试框架安装方法
2011/03/23 PHP
PHP全概率运算函数(优化版) Webgame开发必备
2011/07/04 PHP
php使用文本统计访问量的方法
2016/05/12 PHP
PHP简单实现正则匹配省市区的方法
2018/04/13 PHP
如何优雅的使用 laravel 的 validator验证方法
2018/11/11 PHP
JavaScript开发时的五个注意事项
2007/12/08 Javascript
javascript 函数调用的对象和方法
2010/07/01 Javascript
JavaScript作用域链示例分享
2014/05/27 Javascript
javascript实现浏览器窗口传递参数的方法
2014/09/03 Javascript
jquery选择器中的空格与大于号&gt;、加号+与波浪号~的区别介绍
2016/06/24 Javascript
pc加载更多功能和移动端下拉刷新加载数据
2016/11/07 Javascript
RequireJs的使用详解
2017/02/19 Javascript
vue2.0 如何把子组件的数据传给父组件(推荐)
2018/01/15 Javascript
对angularJs中ng-style动态改变样式的实例讲解
2018/09/30 Javascript
微信小程序移动拖拽视图-movable-view实例详解
2019/08/17 Javascript
Python操作列表的常用方法分享
2014/02/13 Python
Python中使用hashlib模块处理算法的教程
2015/04/28 Python
Python黑帽编程 3.4 跨越VLAN详解
2016/09/28 Python
pandas apply 函数 实现多进程的示例讲解
2018/04/20 Python
Python常用字符串替换函数strip、replace及sub用法示例
2018/05/21 Python
Python之列表的插入&amp;替换修改方法
2018/06/28 Python
python获取当前文件路径以及父文件路径的方法
2019/07/10 Python
详解Python流程控制语句
2020/10/28 Python
让IE6、IE7、IE8支持CSS3的脚本
2010/07/20 HTML / CSS
ManoMano英国:欧洲第一家专注于DIY和园艺市场的电商平台
2020/03/12 全球购物
员工自我鉴定范文
2013/10/06 职场文书
护士自荐信怎么写
2013/10/18 职场文书
致短跑运动员广播稿
2014/01/09 职场文书
意外死亡赔偿协议书
2014/10/14 职场文书
销售会议开幕词
2015/01/28 职场文书
2016年安全生产先进个人事迹材料
2016/02/29 职场文书
婚礼必备主持词范本!
2019/07/23 职场文书
MySQL表类型 存储引擎 的选择
2021/11/11 MySQL
Win10本地连接不见了怎么恢复? win10系统电脑本地连接不见了解决方法
2023/01/09 数码科技