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. HDU1536&&POJ2960 S-Nim(SG函数博弈)

    S-Nim Time Limit: 2000MS   Memory Limit: 65536KB   64bit IO Format: %I64d & %I64u Submit Status ...

  2. 发布windows服务的批处理

    安装bat: C:\Windows\Microsoft.NET\Framework\v4.0.30319\InstallUtil.exe WatchWinService.exe pause 卸载bat ...

  3. ui_modules和ui_method

    ## 06ui.py #coding:utf-8 import tornado.httpserver import tornado.ioloop import tornado.options impo ...

  4. 多目录，多可执行文件的Makfile的编写

    1.前言 在目前的工作中,我遇到这样的一个工作情景,可以认为我要开发一个库,这个库的有多个模块,每个模块的.c放到src中,.h放到include中,这应该是个标准做法. drwxr-xr-x. ro ...

  5. Pom报错

    maven的pom报plugins错误的解决方法 maven的pom报plugins错误的解决方法. 引用 Failure to transfer org.apache.maven.plugins:m ...

  6. 【linux高级程序设计】（第十四章）TCP高级应用 3

    控制socket文件描述符属性 1.set/getsockopt()修改socket属性 int getsockopt (int __fd, int __level, int __optname, v ...

  7. 【转】Talend作业设计模式和最佳实践-Part II

    转载地址:https://mp.weixin.qq.com/s?__biz=MzA3OTg1Mzk4Nw==&mid=2453261363&idx=1&sn=5674f1df8 ...

  8. [BZOJ2738]矩阵乘法 整体二分+二维树状数组

    2738: 矩阵乘法 Time Limit: 20 Sec  Memory Limit: 256 MBSubmit: 1643  Solved: 715[Submit][Status][Discuss ...

  9. AC日记——数颜色 bzoj 2120

    2120 思路: 带修改的莫队: 对于离线排序询问的算法,如何修改呢? 每个询问添加一个修改标记: 表示当前询问在第几个修改之后: 然后把修改标记作为第三关键字来排序: 每次更新端点,先更新时间: 块 ...

  10. J.U.C并发框架源码阅读（九）LinkedBlockingQueue

    基于版本jdk1.7.0_80 java.util.concurrent.LinkedBlockingQueue 代码如下 /* * ORACLE PROPRIETARY/CONFIDENTIAL. ...