利用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 相关文章推荐
javascript TextArea动态显示剩余字符
Oct 22 Javascript
8个实用的jQuery技巧
Mar 04 Javascript
jQuery往textarea中光标所在位置插入文本的方法
Jun 26 Javascript
jQuery获取checkboxlist的value值的方法
Sep 27 Javascript
实例详解jQuery表单验证插件validate
Jan 18 Javascript
基于JavaScript Array数组方法(新手必看篇)
Aug 20 Javascript
vue 将页面公用的头部组件化的方法
Dec 18 Javascript
jquery 给动态生成的标签绑定事件的几种方法总结
Feb 24 jQuery
详解Vue源码之数据的代理访问
Dec 11 Javascript
在微信小程序中保存网络图片
Feb 12 Javascript
JavaScript(js)处理的HTML事件、键盘事件、鼠标事件简单示例
Nov 19 Javascript
js实现菜单跳转效果
Dec 11 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将向Java靠拢
2006/10/09 PHP
采集邮箱的php代码(抓取网页中的邮箱地址)
2012/07/17 PHP
简单的方法让你的后台登录更加安全(php中加session验证)
2012/08/22 PHP
PHP在引号前面添加反斜杠(PHP去除反斜杠)
2013/09/28 PHP
PHP提取字符串中的手机号正则表达式怎么写
2017/07/17 PHP
php+mysql开发的最简单在线题库(在线做题系统)完整案例
2019/03/30 PHP
去除链接虚线全面分析总结
2006/08/15 Javascript
javascript通过class来获取元素实现代码
2013/02/20 Javascript
jQuery 获取浏览器所在的IP地址的小例子
2013/11/08 Javascript
理解javascript定时器中的单线程
2016/02/23 Javascript
原生js实现autocomplete插件
2016/04/14 Javascript
jQuery 常用代码集锦(必看篇)
2016/05/16 Javascript
跨域请求的完美解决方法(JSONP, CORS)
2016/06/12 Javascript
Bootstrap基本组件学习笔记之缩略图(13)
2016/12/08 Javascript
node.js使用免费的阿里云ip查询获取ip所在地【推荐】
2018/09/03 Javascript
在 Vue.js中优雅地使用全局事件的方法
2019/02/01 Javascript
微信小程序实现手指拖动选项排序
2020/04/22 Javascript
Vue+penlayers实现多边形绘制及展示
2020/12/24 Vue.js
[02:37]2015国际邀请赛选手档案—LGD.Xiao8
2015/07/28 DOTA
用python + openpyxl处理excel2007文档思路以及心得
2014/07/14 Python
Python模仿POST提交HTTP数据及使用Cookie值的方法
2014/11/10 Python
Python Web框架Flask信号机制(signals)介绍
2015/01/01 Python
基于Python闭包及其作用域详解
2017/08/28 Python
Python实现七彩蟒蛇绘制实例代码
2018/01/16 Python
Python中的 enum 模块源码详析
2019/01/09 Python
解决python中的幂函数、指数函数问题
2019/11/25 Python
解决tensorflow由于未初始化变量而导致的错误问题
2020/01/06 Python
Python Scrapy图片爬取原理及代码实例
2020/06/12 Python
如何在Anaconda中打开python自带idle
2020/09/21 Python
opencv python 对指针仪表读数识别的两种方式
2021/01/14 Python
雅诗兰黛美国官网:Estee Lauder美国
2016/07/21 全球购物
中学生学习生活的自我评价
2013/10/26 职场文书
优秀实习生感言
2014/03/01 职场文书
党代会心得体会
2014/09/04 职场文书
2014年企业党建工作总结
2014/12/18 职场文书
《模拟人生4》推出新补丁 “婚礼奇缘”DLC终于得到修复
2022/04/03 其他游戏