问题描述

  如果本地安装了app那么直接打开,否则苹果要跳转到app-store,安卓则要跳到对应的市场

解决方案 一

    
    //html代码中 的 a 标签,以微信为例,默认的是调用weixin scheme,去打开本机的微信,如果没有则跳转到相应连接
    <a href="weixin://" 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比可以,结果自行实验。(ios就是强大)

后续继续研究中......

如何用js检测手机是否安装某个app的更多相关文章

  1. android检测手机是否安装某个app

    public static boolean isAvilible(Context context, String packageName){ //获取packagemanager final Pack ...

  2. 如何用js检测判断时间日期的间距

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...

  3. 利用RxJava获取手机已安装的App的图片、应用名称和版本号

    先上效果图: 获取手机已安装的App列表利用Android系统API就可以办到,这里为什么要引入RxJava?现在我们假设一下有下面几个需求: 1.我们不需要所有的App,只需要用户安装的第三方App ...

  4. js检测客户端是否安装

    前言 需求背景:一个web下载页面,需要检测pc是否安装了客户端软件(windows软件).网页上有一个打开客户端按钮.若安装了客户端软件,则直接打开,否则下载软件.支持web下载页面在iframe下 ...

  5. HTML中判断手机是否安装某APP,跳转或下载该应用

    有些时候在做前端输出的时候,需要和app的做些对接工作.就是在手机浏览器中下载某app时,能判断该用户是否安装了该应用.如果安装了该应用,就直接打开该应用:如果没有安装该应用,就下载该应用.那么下面就 ...

  6. 【js】手机浏览器端唤起app,没有app就去下载app 的方法

    这种功能的作用: 1.一般公司有自己的app,而app是需要不断有新用户涌入才能持续运营,达到不错的收入.就需要使用这种方式进行引入新的用户. 2.一些内容在网页端体验不好,或者一些功能需要app内才 ...

  7. js判断手机是否安装了某一款app,有则打开,没有去下载

    function openApp(){ if(navigator.userAgent.match(/(iPhone|iPod|iPad);?/i)) { var loadDateTime = new ...

  8. js检测手机摇一摇

    1.检测设备是否支持重力感应事件deviceorientation deviceorientation 提供设备的物理方向信息,表示为一系列本地坐标系的旋角 function motionHandle ...

  9. 如何用js检查浏览器是否安装flash插件

    <script type="text/javascript" language="JavaScript"> //Powered By smvv @h ...

随机推荐

  1. 小公司生存,一般活过第一年,就能撑3年(读书笔记:成败关键,关键是你是否拥有现金流客户)good

    小公司生存,一般活过第一年,就能撑3年,一般能撑过3年,到第7年遇到坎,如果第7年突破,能活过10年,是想死也不容易,等到第二个七年,可以搞搞人事地震了,因为要二次创业. -------------- ...

  2. ASCII、Unicode、GBK和UTF-8字符编码的区别联系[转]

    http://dengo.org/archives/901 这是我看过的最好的一篇讲述编码的文章 很久很久以前,有一群人,他们决定用8个可以开合的晶体管来组合成不同的状态,以表示世界上的万物.他们看到 ...

  3. HDU_2016——数据的交换输出

    Problem Description 输入n(n<100)个数,找出其中最小的数,将它与最前面的数交换后输出这些数.   Input 输入数据有多组,每组占一行,每行的开始是一个整数n,表示这 ...

  4. 【转】windows下vs2008/2010+opencv2.2开发环境搭建

    版权声明:本文为博主原创文章,未经博主允许不得转载. 1.下载安装Cmake 2.用cmake配置opencv2.2,然后编译,安装 3. 在vs2008中配置opencv2.2 4.Demo 1.下 ...

  5. JDBC批量插入数据效率分析

    对于需要批量插入数据库操作JDBC有多重方式,本利从三个角度对Statement和PreparedStatement两种执行方式进行分析,总结较优的方案. 当前实现由如下条件: 执行数据库:Mysql ...

  6. C#调用PowerShell脚本

    今天通过一个小例子,学习了C#如何调用PowerShell脚本文件的Function以及传参. private bool CallPowershell(string outputFile) { str ...

  7. es6新特性:

    http://es6katas.org/ es6+一些新特性,截图如下 对应方法,函数显示相关的数据,如图: 对应方法,函数的例子,如下

  8. (转)Linux bash shell脚本语法入门

    http://www.linuxsky.org/doc/newbie/201004/389.html 1.基础 #!/bin/bash //bash脚本第一句都是这个,他会让系统指定以bash来解释这 ...

  9. nginx 配置正向 HTTP 代理服务器[转]

    如果不想写到 ngnix.conf 中,那么可以在相同的目录下建立另外一个文件夹存放单独的文件,比如新建一个  proxy 的子目录,然后再在里面新建文件 prox.conf ,然后添加如下内容: s ...

  10. 用SHELL与列表处理了件尴尬事

    与列表语法 command-1 && command-2 && command-3 && command-4 && ...command ...