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的功能，解决方式有两个：

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

測试案例二维码：

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvZ3Jvd2luZ190cmVl/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="">

效果例如以下：

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvZ3Jvd2luZ190cmVl/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="">    

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

生成对应二维码：

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvZ3Jvd2luZ190cmVl/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="">

微信扫一扫打开网页（安卓版）：

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvZ3Jvd2luZ190cmVl/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="">

假设手机安装过该应用的话，“应用宝快速下载”会显示为“打开”

假设没有安装的话，点击快速下载会跳转至应用宝app相应的下载页面（假设没有安装应用宝的话，微信为下载应用宝app。预计是为了推广腾讯自己的应用吧）

微信扫一扫打开网页（IOS版）：

假设app store中有这个app的话。会自己主动跳转至app store的相应app界面中，

假设app store中没有的话，微信会给出网页提示！

浏览器网页推断手机是否安装IOS/Androidclient程序的更多相关文章

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

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

  2. Android之——获取手机安装的应用程序

    转载请注明出处:http://blog.csdn.net/l1028386804/article/details/47114331 前几篇有关Android的博文中.向大家介绍了几个项目中经常使用的有 ...

  3. Android-获取手机已经安装的程序

    有时候我们会查询手机里面是否安装了某个程序,或者获取已经安装软件名称的集合. android这边提供了相应的接口. [java] view plaincopy final PackageManager ...

  4. 使用Xcode7非美刀购买开发者帐号,非越狱安装IOS ipa

    做苹果开发,需要至少99美刀注册开发者帐号,这样写出来的程序才可以在真机上运行调试,才可以发布到app store,现在xcode7之后苹果有了调整,除了发布到app store还是需要美刀帐号,其它 ...

  5. 根据判断PC浏览器类型和手机屏幕像素自动调用不同CSS的代码

    1.媒体查询方法在 css 里面这样写 -------------------- @media screen and (min-width: 320px) and (max-width: 480px) ...

  6. 如何在浏览器网页中实现java小应用程序的功能

    我们知道,java语言的运用就是面向对象实现功能,和c不同,java语言对于程序员来说,运用起来更为简便. 小应用程序与应用程序不同,小应用程序只能在与Java兼容的容器中运行,可以嵌入在HTML网页 ...

  7. android推断手机是否root

    关于推断手机是否已经root的方法.假设app有一些特殊功能须要root权限,则须要推断是否root. 比方一些市场下载完app后自己主动安装. /** * @author Kevin Kowalew ...

  8. 安卓手机上安装 谷歌 play 商店

    安卓手机上安装 谷歌 play 商店 安卓(Android)就是现在流行的智能手机系统,它是由Google公司和开放手机联盟领导及开发.由于安卓系统的底层代码(AOSP)是开源的,以GPL和Apach ...

  9. 苹果电脑怎么给浏览器安装Folx扩展程序

    Folx是一款MacOS专用的老牌综合下载管理软件,它的软件界面简洁,应用简单方便,下载管理及软件设置灵活而强大.Folx不但能够进行页面链接下载.Youtube视频下载,而且还是专业的BT下载工具. ...

随机推荐

  1. Kali安装到移动硬盘或者U盘中~Linux系通用方法(包括Android)

    0.1.保证这个服务必须启动(虚拟机服务最好都启动) 0.2.看看U盘接口类型是否对应 1.安装第一步 2.安装第二步,选择kali镜像 3.设置存放位置(上面的名字无所谓,最后不会用它的,虚拟机只是 ...

  2. 俄罗斯方块（NOIP模拟赛）（水·模拟）

    真是一道神奇的题目233~ 原题传送门 迫不得已贴了个题解的链接.. 好吧,这道题就是分情况讨论,纯模拟,, 没有什么难的.. 脑洞要大,四面都要考虑,不能漏! #include<iostrea ...

  3. SPI总线介绍

    1. 简介 SPI, Serial Peripheral Interface, 串行外设接口, 是一种高速的.全双工.同步的通信总线SPI在芯片的管脚上只占用四根线 SPI接口主要用于MCU与各种外围 ...

  4. Android wifi驱动的移植 realtek 8188

    Android wifi驱动的移植 一般我们拿到的android源代码中wifi应用层部分是好的, 主要是wifi芯片的驱动要移植并添加进去. wifi驱动的移植, 以realtek的8188etv为 ...

  5. windows 修改xhsell安全加密配置

    由于xhsell旧版的与新版的有差别,导致新版的不能用旧版的xsh文件 1.将xshell升级到最新版本2.安装sed与grep到C:\Program Files (x86)\GnuWin323.将b ...

  6. windows 2012(64位) IIS配置asp程序 500 - 内部服务器错误。您查找的资源存在问题，因而无法显示。

    在网上找了很久,包括常规的设置父路径之类的,一直都不可以,搞了一晚上毫无成就感,第二天早上无意中看到一篇文章,说到点子上了,非常感谢.源地址已经找不到了,我把大概的问题截图说明一下. 方法如下:1.打 ...

  7. mysql高可用架构之-MHA学习

    此博文参考  博主:mysql高级DBA yayun  完成 简介: MHA(Master High Availability)目前在MySQL高可用方面是一个相对成熟的解决方案,它由日本DeNA公司 ...

  8. [thinkphp]查看thinkphp系统定义的常量值

    echo 'MEMORY_LIMIT_ON: ' . MEMORY_LIMIT_ON . '<br>'; echo 'THINK_PATH: ' . THINK_PATH . '<b ...

  9. Maximum Size Subarray Sum Equals k -- LeetCode

    Given an array nums and a target value k, find the maximum length of a subarray that sums to k. If t ...

  10. POJ 2135 Farm Tour （费用流）

    [题目链接] http://poj.org/problem?id=2135 [题目大意] 有一张无向图,求从1到n然后又回来的最短路 同一条路只能走一次 [题解] 题目等价于求从1到n的两条路,使得两 ...