利用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 相关文章推荐
jsvascript图像处理—(计算机视觉应用)图像金字塔
Jan 15 Javascript
text-align:justify实现文本两端对齐 兼容IE
Aug 19 Javascript
javascript实现倒计时跳转页面
Jan 17 Javascript
js基本算法:冒泡排序,二分查找的简单实例
Oct 08 Javascript
vue 2.0路由之路由嵌套示例详解
May 08 Javascript
详解使用nvm安装node.js
Jul 18 Javascript
jQuery实现的简单动态添加、删除表格功能示例
Sep 21 jQuery
详解Vue实战指南之依赖注入(provide/inject)
Nov 13 Javascript
详解Vue 单文件组件的三种写法
Feb 19 Javascript
vue 使用lodash实现对象数组深拷贝操作
Sep 10 Javascript
JavaScript async/await原理及实例解析
Dec 02 Javascript
javascript中call,apply,bind的区别详解
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调用其他文件中的类
2018/04/02 PHP
JavaScript类和继承 prototype属性
2010/09/03 Javascript
jquery模拟SELECT下拉框取值效果
2013/10/23 Javascript
JQuery与JS里submit()的区别示例介绍
2014/02/17 Javascript
Javascript控制input输入时间格式的方法
2015/01/28 Javascript
JS打字效果的动态菜单代码分享
2015/08/21 Javascript
使用jQuery或者原生js实现鼠标滚动加载页面新数据
2016/03/06 Javascript
JavaScript事件处理的方式(三种)
2016/04/26 Javascript
JavaScript鼠标事件,点击鼠标右键,弹出div的简单实例
2016/08/03 Javascript
详解vue express启动数据服务
2017/07/05 Javascript
在Mac下彻底卸载node和npm的方法
2018/05/16 Javascript
Vue 实时监听窗口变化 windowresize的两种方法
2018/11/06 Javascript
webpack-url-loader 解决项目中图片打包路径问题
2019/02/15 Javascript
小程序显示弹窗时禁止下层的内容滚动实现方法
2019/03/20 Javascript
mpvue实现左侧导航与右侧内容的联动
2019/10/21 Javascript
vuex的数据渲染与修改浅析
2020/11/26 Vue.js
pycharm 使用心得(七)一些实用功能介绍
2014/06/06 Python
详解Python的Django框架中inclusion_tag的使用
2015/07/21 Python
Python解决两个整数相除只得到整数部分的实例
2018/11/10 Python
Python实现简单的列表冒泡排序和反转列表操作示例
2019/07/10 Python
Python partial函数原理及用法解析
2019/12/11 Python
TensorFlow:将ckpt文件固化成pb文件教程
2020/02/11 Python
Python 抓取数据存储到Redis中的操作
2020/07/16 Python
简述你对Statement,PreparedStatement,CallableStatement的理解
2013/03/25 面试题
JAVA和C++区别都有哪些
2015/03/30 面试题
材料化学应届生求职信
2013/10/09 职场文书
环保建议书400字
2014/05/14 职场文书
地球一小时宣传标语
2014/06/24 职场文书
敬老院标语
2014/06/27 职场文书
高中班主任评语
2014/12/30 职场文书
忠诚与背叛观后感
2015/06/04 职场文书
详解Redis实现限流的三种方式
2021/04/27 Redis
java泛型通配符详解
2021/07/25 Java/Android
Win11 Build 22000.829更新补丁KB5015882发布(附更新修复内容汇总)
2022/07/15 数码科技
win11怎么消除图标小盾牌?win11消除图标小盾牌解决方法
2022/08/05 数码科技
解决ubuntu安装软件时,status-code=409报错的问题
2022/12/24 Servers