利用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 相关文章推荐
基于Jquery实现的一个图片滚动切换
Jun 21 Javascript
JQuery对表格进行操作的常用技巧总结
Apr 23 Javascript
通过$(this)使用jQuery包装后的方法或属性
May 18 Javascript
点击表单提交时出现jQuery没有权限的解决方法
Jul 23 Javascript
js判断是否按下了Shift键的方法
Jan 27 Javascript
js 自带的sort() 方法全面了解
Aug 16 Javascript
AngularJS入门教程之静态模板详解
Aug 18 Javascript
js字符串操作总结(必看篇)
Nov 22 Javascript
微信小程序 扎金花简单实例
Feb 21 Javascript
微信小程序 刷新上拉下拉不会断详细介绍
May 11 Javascript
vue全局组件与局部组件使用方法详解
Mar 29 Javascript
详解使用vue-admin-template的优化历程
May 20 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
多文件上载系统完整版
2006/10/09 PHP
PHP产生不重复随机数的5个方法总结
2014/11/12 PHP
基于PHP代码实现中奖概率算法可用于刮刮卡、大转盘等抽奖算法
2015/12/20 PHP
PHP中explode函数和split函数的区别小结
2016/08/24 PHP
微信开发之php表单微信中自动提交两次问题解决办法
2017/01/08 PHP
PHP实现类似题库抽题效果
2018/08/16 PHP
php使用json-schema模块实现json校验示例
2019/09/28 PHP
javascript 设计模式之单体模式 面向对象学习基础
2010/04/18 Javascript
IE事件对象(The Internet Explorer Event Object)
2012/06/27 Javascript
jquery实现图片翻页效果
2013/12/23 Javascript
javascript动态添加删除tabs标签的方法
2015/07/06 Javascript
jquery实现移动端点击图片查看大图特效
2020/09/11 Javascript
jQuery与JS加载事件用法分析
2016/09/04 Javascript
js HTML5上传示例代码完整版
2016/10/10 Javascript
JavaScript轻松创建级联函数的方法示例
2017/02/10 Javascript
jQuery实现单击按钮遮罩弹出对话框效果(2)
2017/02/20 Javascript
原生JS实现图片懒加载(lazyload)实例
2017/06/13 Javascript
vue中如何实现后台管理系统的权限控制的方法示例
2018/09/19 Javascript
iview通过Dropdown(下拉菜单)实现的右键菜单
2018/10/26 Javascript
vue 使用高德地图vue-amap组件过程解析
2019/09/07 Javascript
解决VUE双向绑定失效的问题
2019/10/29 Javascript
Vue+Spring Boot简单用户登录(附Demo)
2020/11/12 Javascript
Python 匹配任意字符(包括换行符)的正则表达式写法
2009/10/29 Python
浅谈numpy库的常用基本操作方法
2018/01/09 Python
python 实现对文件夹中的图像连续重命名方法
2018/10/25 Python
使用APScheduler3.0.1 实现定时任务的方法
2019/07/22 Python
python集合常见运算案例解析
2019/10/17 Python
python科学计算之scipy——optimize用法
2019/11/25 Python
Python 调用有道翻译接口实现翻译
2020/03/02 Python
python 获取计算机的网卡信息
2021/02/18 Python
澳大利亚领先的在线美容商城:Adore Beauty
2017/04/14 全球购物
LightInTheBox法国站:中国跨境电商
2020/03/05 全球购物
餐饮管理自我介绍信
2014/01/15 职场文书
美术教师自我鉴定
2014/02/12 职场文书
演讲稿之感恩老师(三篇范文)
2019/09/06 职场文书
CSS3中Animation实现简单的手指点击动画的示例
2021/07/15 HTML / CSS