利用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 相关文章推荐
JS 继承实例分析
Nov 04 Javascript
javascript URL编码和解码使用说明
Apr 12 Javascript
学习面向对象之面向对象的术语
Nov 30 Javascript
juery框架写的弹窗效果适合新手
Nov 27 Javascript
Jquery easyUI 更新行示例
Mar 06 Javascript
详谈javascript中的cookie
Jun 03 Javascript
javascript的几种继承方法介绍
Mar 22 Javascript
详解JavaScript权威指南之对象
Sep 27 Javascript
简单谈谈原生js的math对象
Jun 27 Javascript
微信小程序实现星级评分和展示
Jul 05 Javascript
解决微信小程序防止无法回到主页的问题
Sep 28 Javascript
JS异步执行结果获取的3种解决方式
Feb 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
《被神捡到的男人》动画化计划进行中!
2020/03/06 日漫
PHP学习之PHP运算符
2006/10/09 PHP
php中禁止单个IP与ip段访问的代码小结
2012/07/04 PHP
PHP+shell脚本操作Memcached和Apache Status的实例分享
2016/03/11 PHP
PHP文件上传类实例详解
2016/04/08 PHP
thinkphp在低版本Nginx 下支持PATHINFO的方法分享
2016/05/27 PHP
Laravel中的chunk组块结果集处理与注意问题
2018/08/15 PHP
ThinkPHP5&amp;5.1框架关联模型分页操作示例
2019/08/03 PHP
分享几种好用的PHP自定义加密函数(可逆/不可逆)
2020/09/15 PHP
JS动态创建Table,Tr,Td并赋值的具体实现
2013/07/05 Javascript
javascript 实现 秒杀,团购 倒计时展示的记录 分享
2013/07/12 Javascript
解决html按钮切换绑定不同函数后点击时执行多次函数问题
2014/05/14 Javascript
Javascript 中创建自定义对象的方法汇总
2014/12/04 Javascript
Javascript基础教程之argument 详解
2015/01/18 Javascript
浅谈javascript 迭代方法
2015/01/21 Javascript
javascript与Python快速排序实例对比
2015/08/10 Javascript
javascript实现拖放效果
2015/12/16 Javascript
浅谈webpack对样式的处理
2018/01/05 Javascript
详解Vue.js项目API、Router配置拆分实践
2018/03/16 Javascript
几个你不知道的技巧助你写出更优雅的vue.js代码
2018/06/11 Javascript
nodejs require js文件入口,在package.json中指定默认入口main方法
2018/10/10 NodeJs
axios封装,使用拦截器统一处理接口,超详细的教程(推荐)
2019/05/02 Javascript
Node.JS在命令行中检查Chrome浏览器是否安装并打开指定网址
2019/05/21 Javascript
微信小程序表单验证插件WxValidate的二次封装功能(终极版)
2019/09/03 Javascript
Vue3.0数据响应式原理详解
2019/10/09 Javascript
Javascript Web Worker使用过程解析
2020/03/16 Javascript
Python迭代器定义与简单用法分析
2018/04/30 Python
python3 实现对图片进行局部切割的方法
2018/12/05 Python
Tensorflow之MNIST CNN实现并保存、加载模型
2020/06/17 Python
Html5 canvas画图白板踩坑
2020/06/01 HTML / CSS
12岁生日感言
2014/01/21 职场文书
厉行勤俭节约倡议书
2014/05/16 职场文书
2014年平安夜寄语
2014/12/08 职场文书
求职自荐信范文(优秀篇)
2015/03/27 职场文书
公司董事任命书
2015/09/21 职场文书
Oracle以逗号分隔的字符串拆分为多行数据实例详解
2021/07/16 Oracle