利用js判断手机是否安装某个app的多种方案


Posted in Javascript onFebruary 13, 2017

前言

大家在日常开发的时候,经常会遇到这样的需求,通过检测手机,如果本地安装了app那么直接打开,否则苹果要跳转到app-store,安卓则要跳到对应的市场,下面来给大家介绍几种解决的方案。

解决方案 一

//html代码中 的 a 标签,以微信为例,默认的是调用weixin scheme,去打开本机的微信,如果没有则跳转到相应连接

<a href="weixin://" rel="external nofollow" class="btn-download">立即打开</a>




// 为btn-download 绑定事件,如果在500ms内,没有解析到协议,那么就会跳转到下载链接 


 var appstore, ua = navigator.userAgent;
  if(ua.match(/Android/i)){ 
   appstore = 'market://search?q=com.singtel.travelbuddy.android';
  }
  if(ua.match(/iphone|ipod|ipad/)){
   appstore = "https://itunes.apple.com/cn/app/wei-xin/id414478124?mt=8&ign-mpt=uo%3D4"; 
  }
  function applink(fail){ 
   return function(){ 
    var clickedAt = +new Date; 
    // During tests on 3g/3gs this timeout fires immediately if less than 500ms. 
    setTimeout(function(){ 
      // To avoid failing on return to MobileSafari, ensure freshness! 
      if (+new Date - clickedAt < 2000){ 
       window.location = fail; 
      } 
    }, 500);  
   }; 
  } 
  $('.icon-download, .btn-download')[0].onclick = applink(appstore);

解决方案二

通过在页面中生成一个隐藏的iframe,iframe的src指向 app 协议,例如 weixin scheme,并监听onerror事件,意思是如果无法解析协议,就会触发onerror事件,但是我尝试了一下,未果。代码如下,可参考一下。

// 页面中有div#iframe-box 用来插入生成的iframe,还是以微信为例

 var ifm = document.createElement('iframe'), isInstalled;
  ifm.style.display = 'none';
  ifm.src = 'wixin://';
  ifm.onload = function(e){
   var e = e || window.event;
   e.preventDefault();
  }
  ifm.onerror = function(){
   //isInstalled = false;
   alert(1);
  }
  document.getElementById('iframe-box').appendChild(ifm);



// 但这时的问题是,iframe的src成功解析到了协议,则会直接跳转,但是解析不到的话,也不会触发error事件,这个还要继续研究


// 可以把上面的代码,放到函数中,然后作为某个按钮的响应函数。

解决方案三

对于ios手机,会有如下写法

<meta name="apple-itunes-app" content="app-id=414478124" />

将上面代码放到head中,根据name也会知道意思,app-id是微信的app-id,用ios手机看会看到提示,andriod比可以,结果自行实验。

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流。

Javascript 相关文章推荐
复制小说文本时出现的随机乱码的去除方法
Sep 07 Javascript
基于jQuery的模仿新浪微博时间的组件
Oct 04 Javascript
JS 数字转换研究总结
Dec 26 Javascript
JavaScript预解析及相关技巧分析
Apr 21 Javascript
node.js插件nodeclipse安装图文教程
Oct 19 Javascript
jQuery模拟select实现下拉菜单功能
Jun 20 Javascript
浅析JavaScript中break、continue和return的区别
Nov 30 Javascript
浅谈Angular 观察者模式理解
Nov 01 Javascript
基于Vue SEO的四种方案(小结)
Jul 01 Javascript
Vue中常用rules校验规则(实例代码)
Nov 14 Javascript
JavaScript享元模式原理与用法实例详解
Mar 09 Javascript
vue实现多个echarts根据屏幕大小变化而变化实例
Jul 19 Javascript
详谈js中window.location.search的用法和作用
Feb 13 #Javascript
JS基于onclick事件实现单个按钮的编辑与保存功能示例
Feb 13 #Javascript
js获取当前页的URL与window.location.href简单方法
Feb 13 #Javascript
js实现九宫格拼图小游戏
Feb 13 #Javascript
AngularJS学习第二篇 AngularJS依赖注入
Feb 13 #Javascript
关于不同页面之间实现参数传递的几种方式讨论
Feb 13 #Javascript
如何用js判断dom是否有存在某class的值
Feb 13 #Javascript
You might like
PHP令牌 Token改进版
2008/07/18 PHP
php中判断文件存在是用file_exists还是is_file的整理
2012/09/12 PHP
PHP数据集构建JSON格式及新数组的方法
2012/11/07 PHP
jQuery获取json后使用zy_tmpl生成下拉菜单
2015/03/27 PHP
PHP面向对象五大原则之依赖倒置原则(DIP)详解
2018/04/08 PHP
laravel框架模型、视图与控制器简单操作示例
2019/10/10 PHP
thinkphp5.1 框架钩子和行为用法实例分析
2020/05/25 PHP
有关js的变量作用域和this指针的讨论
2010/12/16 Javascript
editable.js 基于jquery的表格的编辑插件
2011/10/24 Javascript
javascript中注册和移除事件的4种方式
2013/03/20 Javascript
jQuery对象和Javascript对象之间转换的实例代码
2013/03/20 Javascript
JavaScript中innerHTML,innerText,outerHTML的用法及区别
2015/09/01 Javascript
Bootstrap~多级导航(级联导航)的实现效果【附代码】
2016/03/08 Javascript
原生JS实现旋转木马式图片轮播插件
2016/04/25 Javascript
Javascript之面向对象--封装
2016/12/02 Javascript
解决修复npm安装全局模块权限的问题
2018/05/17 Javascript
Vue 实现手动刷新组件的方法
2019/02/19 Javascript
jQuery控制input只能输入数字和两位小数的方法
2019/05/16 jQuery
vue父组件给子组件的组件传值provide inject的方法
2019/10/23 Javascript
Vue vm.$attrs使用场景详解
2020/03/08 Javascript
浅谈vue-props的default写不写有什么区别
2020/08/09 Javascript
Python自定义函数的创建、调用和函数的参数详解
2014/03/11 Python
Python编程入门的一些基本知识
2015/05/13 Python
Python实现批量转换文件编码的方法
2015/07/28 Python
python中abs&amp;map&amp;reduce简介
2018/02/20 Python
如何用Python合并lmdb文件
2018/07/02 Python
对Python多线程读写文件加锁的实例详解
2019/01/14 Python
Python3使用TCP编写一个简易的文件下载器功能
2019/05/08 Python
python 对字典按照value进行排序的方法
2019/05/09 Python
python中复数的共轭复数知识点总结
2020/12/06 Python
HTML5如何使用SVG的方法示例
2019/01/11 HTML / CSS
如果让你测试一台高速激光打印机,你都会进行哪些测试
2012/12/04 面试题
服务承诺书范文
2014/05/19 职场文书
基本公共卫生服务健康教育工作方案
2014/05/22 职场文书
食品安全演讲稿
2014/09/01 职场文书
Python使用openpyxl批量处理数据
2021/06/23 Python