最近在做一个项目，该项目的前身是为mobile browser量身打造的一个网站。现在有这样一个需求：

当用户在用mobile browser浏览该网站的时候会点击一个按钮/超链接，通过这个按钮的点击事情需要打开安装在本机的应用程序，或者如果本机没有安装该应用程序则打开应用商店并打开该程序在商店中的搜索结果页面。

刚开始的时候iPhone team的人给出一个solution，下面是实施跳转的HTML + javascript源代码。

  1. <html>
  2. <head>
  3. <meta name="viewport" content="width=device-width" />
  4. </head>
  5. <body>
  6. <h2><a id="applink1" href="mtcmtc://profile/116201417">Open scheme(mtcmtc) defined in iPhone with parameters </a></h2>
  7. <h2><a id="applink2" href="unknown://nowhere">open unknown with fallback to appstore</a></h2>
  8. <p><i>Only works on iPhone!</i></p>
  9. <script type="text/javascript">
  10. // To avoid the "protocol not supported" alert, fail must open another app.
  11. var appstore = "itms://itunes.apple.com/us/app/facebook/id284882215?mt=8&uo=6";
  12. function applink(fail){
  13. return function(){
  14. var clickedAt = +new Date;
  15. // During tests on 3g/3gs this timeout fires immediately if less than 500ms.
  16. setTimeout(function(){
  17. // To avoid failing on return to MobileSafari, ensure freshness!
  18. if (+new Date - clickedAt < 2000){
  19. window.location = fail;
  20. }
  21. }, 500);
  22. };
  23. }
  24. document.getElementById("applink1").onclick = applink(appstore);
  25. document.getElementById("applink2").onclick = applink(appstore);
  26. </script>
  27. </body>
  28. </html>

其原理就是为HTML页面中的超链接点击事件增加一个setTimeout方法.

如果在iPhone上面500ms内，本机有应用程序能解析这个协议并打开程序，则这个回调方法失效；如果本机没有应用程序能解析该协议或者500ms内没有打开个程序，则执行setTimeout里面的function，就是跳转到apple的itunes。

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

我就开始了我的Google search之旅，最终在stackoverflow一个不起眼的地方找到solution。

不解释，先给出源代码

android里面androidManifest.xml文件对activity的配置，如何配置就不表述了，表达能力有限，请参考developer.android.com

  1. <activity android:name=".ui.UploadActivity" android:screenOrientation="portrait">
  2. <intent-filter>
  3. <data android:scheme="http" android:host="192.168.167.33" android:port="8088" android:path="/mi-tracker-web/download.html"/>
  4. <action android:name="android.intent.action.VIEW" />
  5. <category android:name="android.intent.category.DEFAULT" />
  6. <category android:name="android.intent.category.BROWSABLE" />
  7. </intent-filter>
  8. </activity>

HTML页面中指向该应用程序的hyperlink

  1. <a id="applink1" href="http://192.168.167.33:8088/mi-tracker-web/download.html">
  2. Open Application</a>

不难发现，在androidManifest.xml中配置的filter中data的属性表述，在下面的HTML.href中全部看到了。请注意，这两个路径要全部一致，不能有差别，否则android系统就不会拦截这个hyperlink。

好了，为什么我说这个solution能解决我们当初提出来的需求呢，答案在这里：

如果说本机安装了这个应用程序

在android browser中点击HTML中的applink1，browser会重定向到指定的链接，但是由于我们的应用程序在android OS中配置了一个intent-filter，也是针对这个制定的链接。就是说现在android系统有两个程序能处理这个链接：一个是系统的browser，一个是配置了intent-filter的activity。现在点击这个链接，系统就会弹出一个选择：是用browser还是你指定的activity打开。如果你选择你的activity，系统就会打开你的应用程序，如果你继续选择用browser，就没有然后了。

如果说本机木有安装这个应用程序

那么这个HTML里面的这个超链接就起很重要的左右了，这个download.html里面可以forward到android的应用商店

download.jsp源代码如下。具体为什么请求的是download.html这个地址却访问到了download.jsp，就不解释了，struts2的东西。

  1. <%@ page language="java" contentType="text/html; charset=ISO-8859-1"
  2. pageEncoding="ISO-8859-1"%>
  3. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  4. <html>
  5. <head>
  6. <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
  7. <title>Insert title here</title>
  8. </head>
  9. <body>
  10. <script type="text/javascript">
  11. <span style="white-space:pre">    </span>window.location="market://search?q=com.singtel.travelbuddy.android";
  12. </script>
  13. </body>
  14. </html>

唉，文笔不行，估计我写出来自己都不怎么看得懂。就再把跳转的关键点说一下：

在androidManifest.xml中定义intent-filter的时候定义的scheme，host，port，path拼凑起来是一个有用的HTTP路径，这样就算本机没有activity定义了intent-filter来捕获这个链接，那这个链接也会重定向到打开android market place的页面，继而打开应用商店。因为每个android手机都会捕获到market这个协议(如果android手机里面没有market商店，不怪我哈)，系统就会自动打开market place应用商店并根据参数进入搜索页面并显示结果。

浏览器判断是否安装了ios/android客户端程序的更多相关文章

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

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

  2. 浏览器网页判断手机是否安装IOS/Android客户端程序

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

  3. 浏览器判断是否安装APP

    浏览器判断是否安装APP http://blog.csdn.net/henrywulibin/article/details/52087041 从浏览器中打开我们的应用 http://blog.csd ...

  4. fir.im Weekly - iOS/Android 应用程序架构解析

    假如问你一个iOS or Android app的架构,你会从哪些方面来说呢? 本期 fir.im Weekly 收集了关于  iOS/Android 开发资源,也加入了一些关于 Web 前端方面的分 ...

  5. [iPhone高级] 基于XMPP的IOS聊天客户端程序(IOS端一)

    介绍完了服务器,这篇我们就要介绍重点了,写我们自己的IOS客户端程序 先看一下我们完成的效果图 首先下载xmppframework这个框架,下载 点ZIP下载 接下来,用Xcode新建一个工程 将以下 ...

  6. Gradle Android客户端程序打包（基于gradle 1.12版本验证通过）

    一.前言 android客户端开发进入尾声,负责SEO同事突然发给我一个涉及45个发布渠道的噩耗,之前只发布自有渠道的工作方式(手动修改参数打包)已经不满足需求,所以引入最近比较流行的gradle打包 ...

  7. 通过js自动判断移动终端设备（ios\android等）

    当用户用移动设备扫描一个二维码是,将扫描后的链接链接到一个页面,该页面只包含判断移动终端设备的js,判断好后自动跳转到对应的链接 或下载对应的内容. html代码如下: <script> ...

  8. 上传图片转为base64格式预览并压缩图片（不兼容IE9以下浏览器，兼容移动端ios,android）

    前些天公司要求在微信移动端做上传图片并预览的功能,要求能够调用摄像头拍照并立即预览. 在网上搜了一些方法,开始自己写了个简单的功能实现代码.结果发现移动端拍照出来的图片动不动就2M+,又因为要批量上传 ...

  9. 在浏览器判断是否安装app，并打开相应的页面

    1.代码功能: 判断手机/平板是否安装app 如果安装 则调用app的scheme,传入url当作参数,来做后续操作 如果没有安装 则跳转到app store/google play 下载app 2. ...

随机推荐

  1. Jmeter之定时器

    转自:https://www.cnblogs.com/imyalost/p/6004678.html 一.定时器的作用域 1.定时器是在每个sampler(采样器)之前执行的,而不是之后(无论定时器位 ...

  2. 查看外网IP

    同一个网络,登录不同网站/APP, 显示的登录IP可能不一样. 输入ip138.com 得到外网IP: 输入:http://www.net.cn/static/customercare/yourip. ...

  3. Python中yield函数浅析

    带有yield的函数在Python中被称之为generator(生成器),下面我们将使用斐波那契数列来举例说明下该函数:(环境是在Python3.x下)  如何生成斐波那契数列: 斐波那契(Fibon ...

  4. WC2007 石头剪刀布 数学+最小费用最大流

    题面: 有N个人参加一场比赛,赛程规定任意两个人之间都要进行一场比赛:这样总共有N*(N-1)/2场比赛.比赛已经进行了一部分,我们想知道在极端情况下,比赛结束后最多会发生多少剪刀石头布情况.即给出已 ...

  5. Spider-Scrapy css选择器提取数据

    首先我们来说说css选择器:其实在上面的概述:和scrapy相关的函数就这么三个而已:response.css("css表达式").extract().extract_first( ...

  6. STM32——通用定时器基本定时功能

    STM32——————通用定时器基本定时功能                                                                           1.  ...

  7. web前端开发——HTML

    一.简介 1.发展史 (1)web1.0 时代 产物:网页制作 那时的网页主要是静态网页,即没有与用户交互,仅仅是提供信息浏览的网页.如QQ日志.博文等. 网页制作三剑客:Dreamweaver+Fi ...

  8. HttpModule用户的验证

    HttpModule是向实现类提供模块初始化和处置事件.当一个HTTP请求到达HttpModule时,整个ASP.NET Framework系统还并没有对这个HTTP请求做任何处理,也就是说此时对于H ...

  9. 解决idea创建ssm项目找不到mybatis的mapper的xml文件问题

    http://blog.csdn.net/v19freedom/article/details/69855302 后来上网搜了下,别人给出的答复 idea在build工程的时候 遇到maven项目 使 ...

  10. eclipse安装Aptana 插件，并设置使之能提示css,js,html，帮助编写代码

    在Eclipse 4.2 上安装 Aptana 3.2遇到的错误 就是找不到什么文件来着,我在装maven的时候也遇到了. 烦人... (这文章是我还在用eclipse的时候,为了编写js代码的时候提 ...