利用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 相关文章推荐
event.srcElement 用法笔记e.target
Dec 18 Javascript
基于jquery实现的类似百度搜索的输入框自动完成功能
Aug 23 Javascript
jquery select 设置默认选中的示例代码
Feb 07 Javascript
JS中的二叉树遍历详解
Mar 18 Javascript
Boostrap入门准备之border box
May 09 Javascript
使用RequireJS库加载JavaScript模块的实例教程
Jun 06 Javascript
Angular企业级开发——MVC之控制器详解
Feb 20 Javascript
mongoose中利用populate处理嵌套的方法
May 26 Javascript
基于JavaScript实现前端数据多条件筛选功能
Aug 19 Javascript
360doc网站不登录就无法复制内容的解决方法
Jan 27 Javascript
用Fundebug插件记录网络请求异常的方法
Feb 21 Javascript
有趣的JavaScript隐式类型转换操作实例分析
May 02 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代码
2011/11/27 PHP
关于PHP二进制流 逐bit的低位在前算法(详解)
2013/06/13 PHP
使用PHPExcel操作Excel用法实例分析
2015/03/26 PHP
PHP中is_file()函数使用指南
2015/05/08 PHP
PHP实现合并discuz用户
2015/08/05 PHP
Linux下 php7安装redis的方法
2018/11/01 PHP
php进程(线程)通信基础之System V共享内存简单实例分析
2019/11/09 PHP
你可能不再需要JQUERY
2021/03/09 Javascript
js常用排序实现代码
2010/12/28 Javascript
30分钟就入门的正则表达式基础教程
2013/02/25 Javascript
模拟用户点击弹出新页面不会被浏览器拦截
2014/04/08 Javascript
javascript 实现map集合
2015/04/03 Javascript
JS绘制生成花瓣效果的方法
2015/08/05 Javascript
JS 清除字符串数组中,重复元素的实现方法
2016/05/24 Javascript
微信小程序实现滑动删除效果
2017/05/19 Javascript
vue2.0 中#$emit,$on的使用详解
2017/06/07 Javascript
iview中Select 选择器多选校验方法
2018/03/15 Javascript
浅谈Vue路由快照实现思路及其问题
2018/06/07 Javascript
Vue-router 中hash模式和history模式的区别
2018/07/24 Javascript
Vue中保存数据到磁盘文件的方法
2018/09/06 Javascript
Vue组件内部实现一个双向数据绑定的实例代码
2019/04/04 Javascript
微信小程序wx.request的简单封装
2019/11/13 Javascript
jquery添加div实现消息聊天框
2020/02/08 jQuery
简单上手Python中装饰器的使用
2015/07/12 Python
使用Python3 编写简单信用卡管理程序
2016/12/21 Python
python实现远程通过网络邮件控制计算机重启或关机
2018/02/22 Python
Python django使用多进程连接mysql错误的解决方法
2018/10/08 Python
Python Tkinter模块 GUI 可视化实例
2019/11/20 Python
django ajax发送post请求的两种方法
2020/01/05 Python
Pycharm激活码激活两种快速方式(附最新激活码和插件)
2020/03/12 Python
S’well Bottle保温杯官网:绝缘不锈钢水瓶
2018/05/09 全球购物
adidas爱尔兰官方网站:阿迪达斯运动鞋和运动服
2019/11/01 全球购物
SCHIESSER荷兰官方网站:德国内衣专家
2020/10/09 全球购物
11.9消防日宣传标语
2014/10/08 职场文书
MySQL 常见的数据表设计误区汇总
2021/06/07 MySQL
美元符号 $
2022/02/17 杂记