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. OpenResty 平滑升级

    1.先去下载新版,当前最新版为“ngx_openresty-1.7.0.1” 2.开始升级 tar zxvf ngx_openresty-1.7.0.1.tar.gz cd ngx_openresty ...

  2. ACM 取石子（七）

    取石子(七) 时间限制:1000 ms  |  内存限制:65535 KB 难度:1   描述 Yougth和Hrdv玩一个游戏,拿出n个石子摆成一圈,Yougth和Hrdv分别从其中取石子,谁先取完 ...

  3. AJAX 跨域请求 - JSONP获取JSON数据

    Asynchronous JavaScript and XML (Ajax ) 是驱动新一代 Web 站点(流行术语为 Web 2.0 站点)的关键技术.Ajax 允许在不干扰 Web 应用程序的显示 ...

  4. 关于C#引用Dll后，找不到命名空间的问题

    在引用里明确添加了一个Dll,能够看到该Dll详细信息,可就是用using找不到命名空间.并且发现刚引用时是有该命名空间,一编译就消失了. 最后发现原因如下: 原目标框架为.Net Framework ...

  5. Servlet处理get请求时的中文乱码问题

    我们都知道,使用Servlet处理get请求时,如果get请求的参数中有中文,直接接收会是乱码,这个时候我们使用类似下面的语句来处理乱码: 12345 String name = request.ge ...

  6. 最新Velocity使用和Velocity语法

    Velocity语法 Velocity的使用要用到下面几个包,可以从官网下载,commons-collections.jar,velocity-1.4.jar,velocity-dept.jar; 1 ...

  7. 最大乘积 Maximun Product

    最大乘积 题目链接:http://acm.hust.edu.cn/vjudge/contest/view.action?cid=84562#problem/B 题意: 输入n个元素组成的序列s,你需要 ...

  8. HashMap封装的数据用循环快速添加进list中产生的数据集全部相同的问题

    一.问题概述 在一次使用SimpleAdapter时,Data需要使用传入一条数据(Image.Text),该数据条使用HashMap封装.在用HashMap封装的数据用循环快速添加进list中产生了 ...

  9. Hibernate反向工程在javaweb下的操作配置

    1.在javaEE下新建项目,在WEB-INF的lib文件夹下添加所用到的jar包. 2.创建Hibernate 主配置文件 文件----新建----其他下的Hibernate目录,如图: 下一步,注 ...

  10. Hive_进阶

    回顾: hive 优点 1. 类sql语句靠近关系型数据库,可自定义函数,增加了扩展性,易于开发,减少mapreduce学习成本 2. hive转换sql语句为mapreduce程序以mapreduc ...