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

前言

大家在日常开发的时候，经常会遇到这样的需求，通过检测手机，如果本地安装了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比可以，结果自行实验。

总结

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

# js检测app是否安装  # js判断手机安装app  # 检测手机是否安装app  # JSP中实现判断客户端手机类型并跳转到app下载页面  # 用于deeplink的js方法(判断手机是否安装app)  # js判断移动端是否安装某款app的多种方法  # JS监听微信、支付宝等移动app及浏览器的返回、后退、上一页按钮的事件方法  # JS实现点击网页判断是否安装app并打开否则跳转app store  # js实现微信/QQ直接跳转到支付宝APP打开口令领红包功能  # JS触摸屏网页版仿app弹窗型滚动列表选择器/日期选择器  # JS拉起或下载app的实现代码  # js判断手机是否安装并打开app  # 未安装则安装app【兼容Android、ios  # 亲测可用】  # 就会  # 跳转到  # 为例  # 的是  # 会有  # 也会  # 中有  # 如果没有  # 问题是  # 几种  # 跳转  # 这篇文章  # 本机  # 跳到  # 下载链接  # 则会  # 经常会  # 绑定  # 则要  # 来给大家 

相关文章： Avalonia如何实现跨窗口通信 Avalonia窗口间数据传递  网站设计制作企业有哪些,抖音官网主页怎么设置？  建站之星会员如何解锁更多建站功能？  已有域名和空间如何搭建网站？  个人摄影网站制作流程,摄影爱好者都去什么网站？  建站主机选哪种环境更利于SEO优化？  如何零成本快速生成个人自助网站？  如何快速上传自定义模板至建站之星？  实现点击下箭头变上箭头来回切换的两种方法【推荐】  如何高效生成建站之星成品网站源码？  教学网站制作软件,学习*后期制作的网站有哪些？  香港服务器网站卡顿？如何解决网络延迟与负载问题？  ppt在线制作免费网站推荐,有什么下载免费的ppt模板网站？  建站之星logo尺寸如何设置最合适？  如何在香港免费服务器上快速搭建网站？  Python lxml的etree和ElementTree有什么区别  如何通过多用户协作模板快速搭建高效企业网站？  相册网站制作软件,图片上的网址怎么复制？  电商网站制作价格怎么算,网上拍卖流程以及规则？  北京制作网站的公司排名,北京三快科技有限公司是做什么？北京三快科技？  无锡营销型网站制作公司,无锡网选车牌流程？  装修招标网站设计制作流程,装修招标流程？  青岛网站建设如何选择本地服务器？  香港服务器网站推广：SEO优化与外贸独立站搭建策略  建站之星如何保障用户数据免受黑客入侵？  python的本地网站制作,如何创建本地站点？  b2c电商网站制作流程,b2c水平综合的电商平台？  Thinkphp 中 distinct 的用法解析  php条件判断怎么写_ifelse和switchcase的使用区别【对比】  北京营销型网站制作公司,可以用python做一个营销推广网站吗？  建站之星如何快速解决建站难题？  网站制作的步骤包括,正确网址格式怎么写？  头像制作网站在线制作软件,dw网页背景图像怎么设置？  ,sp开头的版面叫什么？  东莞市网站制作公司有哪些,东莞找工作用什么网站好？  如何快速搭建高效WAP手机网站吸引移动用户？  如何获取开源自助建站系统免费下载链接？  音响网站制作视频教程,隆霸音响官方网站？  建站10G流量真的够用吗？如何应对访问高峰？  北京企业网站设计制作公司,北京铁路集团官方网站？  文字头像制作网站推荐软件,醒图能自动配文字吗？  如何快速搭建高效香港服务器网站？  公司网站的制作公司,企业网站制作基本流程有哪些？  高端云建站费用究竟需要多少预算？  东莞专业制作网站的公司,东莞大学生网的网址是什么？  广东企业建站网站优化与SEO营销核心策略指南  如何通过远程VPS快速搭建个人网站？  建站主机SSH密钥生成步骤及常见问题解答？  建站主机如何安装配置？新手必看操作指南  建站之星展会模版如何一键下载生成？