IOS

原理如下：

为HTML页面中的超链接点击事件增加一个setTimeout方法。

如果在iPhone上面500ms内，本机有应用程序能解析这个协议并打开程序，则这个回调方法失效；

如果本机没有应用程序能解析该协议或者500ms内没有打开个程序，则执行setTimeout里面的function，就是跳转到apple的itunes。

<html>

<head>

<meta name="viewport" content="width=device-width" />

</head>

<body>

<h2><a id="applink1" href="mtcmtc://profile/116201417">Open scheme(mtcmtc) defined in iPhone with parameters </a></h2>

<h2><a id="applink2" href="unknown://nowhere">open unknown with fallback to appstore</a></h2>

<p><i>Only works on iPhone!</i></p>

<script type="text/javascript">

// To avoid the "protocol not supported" alert, fail must open another app.

var appstore = "itms://itunes.apple.com/us/app/facebook/id284882215?mt=8&uo=6";

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);

};

}

document.getElementById("applink1").onclick = applink(appstore);

document.getElementById("applink2").onclick = applink(appstore);

</script>

</body>

</html>

Android

同样的原理来处理android的javascript跳转，发现如果本机没有程序 注册intent-filter for 这个协议，那么android内置的browser就会处理这个协议并且立即给出反应(404，你懂的)，不会像iPhone一样去执行 setTimeout里面的function，即便你把500ms改成0ms也不管用。

在AndroidManifest.xml文件中对应Activity中添加如下intent-filter配置：

<activity

android:name=".ui.welcome.WelcomeActivity"

android:screenOrientation="portrait"

android:theme="@android:style/Theme.NoTitleBar" >

</activity>

对应HTML页面中指向改应用程序Activity的HyperLink超链接：

<a id="applink1" href="toutou://www.toutout.com/mi-tracker-web/download.html">Open Application</a>

优化处理：

可以配置html的scheme和host以及port、path等为类似如下格式：

http://192.168.167.33:8088/mi-tracker-web/download.html

浏览器在访问这个超链接时，如果手机没有安装相应app，可以设置自动重定向到如下download.jsp（Web Service知识）：

<html>

<head>

<meta name="viewport" content="width=device-width" />

</head>

<body>

<a id="applink1" href="market://details?id=com.toutouunion">Open Application</a>

</html>

通过market协议，自动跳转至手机应用商店（前提是手机必须安装有应用商店相关的APP软件）。参考博文：Android Market链接的生成

微信浏览器

由于在微信里面打开网页，会屏蔽掉网页里面的app启动事件，同时也屏蔽掉app的下载链接，导致用户无法判断本地是否安装有相应app或者启动本地app，以及正常下载app的功能，解决方案有两个：

一：提示用户使用手机浏览器打开网页

测试案例二维码：

效果如下：

  

Js实现的部分源代码：

function is_weixin(){

var ua = navigator.userAgent.toLowerCase();

if(ua.match(/MicroMessenger/i)=="micromessenger") {

return true;

} else {

return false;

}

}

var browser={

versions:function(){

var u = navigator.userAgent, app = navigator.appVersion;

return {

trident: u.indexOf('Trident') > -1,

presto: u.indexOf('Presto') > -1,

webKit: u.indexOf('AppleWebKit') > -1,

gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1,

mobile: !!u.match(/AppleWebKit.*Mobile.*/),

ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/),

android: u.indexOf('Android') > -1 || u.indexOf('Linux') > -1,

iPhone: u.indexOf('iPhone') > -1 ,

iPad: u.indexOf('iPad') > -1,

webApp: u.indexOf('Safari') == -1

}

}(),

language:(navigator.browserLanguage || navigator.language).toLowerCase()

};

function init(){

if(is_weixin()){

//weixin为提示使用浏览器打开的div

document.getElementById("weixin").style.display="block";

if(browser.versions.ios || browser.versions.iPhone || browser.versions.iPad){

document.getElementById("step2").innerHTML="2. 在Safari中打开";

}else{

document.getElementById("step2").innerHTML="2. 在浏览器中打开";

}

}else{

//下载页div

document.getElementById("main").style.display="block";

}

}

init();

二：交由应用宝处理

申请应用宝合作，依据应用宝提供的下载链接，跳转至应用宝界面，再点击下载，应用宝会依据手机设备的不同决定跳转至App store或者安卓应用宝的相应下载页面。

应用宝开放平台提供的app下载链接地址格式为：http://a.app.qq.com/o/simple.jsp?pkgname=your package name

如：http://a.app.qq.com/o/simple.jsp?pkgname=com.feng.dota

浏览器网页判断手机是否安装IOS/Android客户端程序的更多相关文章

  1. 浏览器网页推断手机是否安装IOS/Androidclient程序

    IOS 原理例如以下: 为HTML页面中的超链接点击事件添加一个setTimeout方法. 假设在iPhone上面500ms内,本机有应用程序能解析这个协议并打开程序,则这个回调方法失效. 假设本机没 ...

  2. 浏览器判断是否安装了ios/android客户端程序

    最近在做一个项目,该项目的前身是为mobile browser量身打造的一个网站.现在有这样一个需求: 当用户在用mobile browser浏览该网站的时候会点击一个按钮/超链接,通过这个按钮的点击 ...

  3. js判断是否是PC,IOS,Android客户端

    写在前面 在项目中使用html5,需要针对不同的客户端浏览器有不一样的处理方式,这就需要对请求中的useragent进行分析,并进行处理. 一个例子 <%@ Page Language=&quo ...

  4. JS判断是否是微信页面，判断手机操作系统（ios或android）并跳转到不同下载页面

    JS判断客户端是否是iOS或者Android 参考:http://caibaojian.com/browser-ios-or-android.html function is_weixin() { v ...

  5. 移动端：判断是否微信端、判断手机操作系统（ios或android）

    http://caibaojian.com/browser-ios-or-android.htmlfunction is_weixin() { var ua = window.navigator.us ...

  6. 构建一个Gods Eye Android应用程序：第1部分 – 收集已安装的Android应用程序

    首先问候一下我的黑客伙伴们,在之前的Introduction to Amunet 教程中,我们了解到Amunet可能是一个间谍Android应用程序. 我不浪费太多时间因而直入主题. 在本教程中,我们 ...

  7. 小米手机不能直接运行Android Studio程序

    小米手机不能直接运行Android Studio程序 转载自:http://www.jianshu.com/p/6588c69b42cf Problem description: Android St ...

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

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

  9. Mosquitto-1.5在Linux上的安装以及Android客户端的实现

    一.关于MQTT MQTT(Message Queuing Telemetry Transport,消息队列遥测传输协议),是一种基于发布/订阅(publish/subscribe)模式的" ...

随机推荐

  1. ACM 精挑细选

    精 挑 细 选 时间限制:3000 ms  |  内存限制:65535 KB 难度:1   描述 小王是公司的仓库管理员,一天,他接到了这样一个任务:从仓库中找出一根钢管.这听起来不算什么,但是这根钢 ...

  2. usaco silver刷水~其实是回顾一下，补题解

    [BZOJ1606][Usaco2008 Dec]Hay For Sale 裸01背包 ;i<=n;i++) for(int j=m;j>=a[i];j--) f[j]=max(f[j], ...

  3. poj 2239 二分图最大匹配，基础题

    1.poj 2239   Selecting Courses   二分图最大匹配问题 2.总结:看到一个题解,直接用三维数组做的,很巧妙,很暴力.. 题意:N种课,给出时间,每种课在星期几的第几节课上 ...

  4. SQLSERVER远程备份、恢复(转)

    SQLSERVER服务实例名称:192.168.0.2需要备份的数据库名称: a备份机器名称(Client端):192.168.0.3备份机用户:zf 密码:123备份机域名:domain备份机提供备 ...

  5. 最好的文本框样式 最漂亮的文本框样式 textbox css样式

    输入框景背景透明: <input style="background:transparent;border:1px solid #ffffff"> 鼠标划过输入框,输入 ...

  6. 再说memcache的multiget hole（无底洞）

    关键词:multiget hole,memcache 适用于:java,php 基础知识背景: 1)multiget 是什么:     multiget 指的是从 memcache(或其他分布式缓存) ...

  7. 在docker 中搭建gitlab环境

    docker run --name gitlab -it -p : -p : -p : \ --env 'GITLAB_SECRETS_DB_KEY_BASE=Rpwq35wjLJ5N6CrkvdXs ...

  8. nginx 中 PHP 调用PEAR.php遇到的问题

    公司有个老项目,写了很多年了,是在apache 上面跑的,无意间,我想让它跑到nginx上,结果遇到了PEAR.php的问题,先安装pear 基本安富有就是 wget http://pear.php. ...

  9. Emmet 生成 HTML 的语法

    Emmet 使用类似于 CSS 选择器的语法描述元素在生成的文档树中的位置及其属性. 元素 可以使用元素名(如 div 或者 p)来生成 HTML 标签.Emmet 没有预定义的有效元素名的集合,可以 ...

  10. How to use the Isolated Storage Explorer tool for Windows Phone

    Isolated Storage Explorer is installed in the following location: Program Files (x86)\Microsoft SDKs ...