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. WCF技术剖析 Two

    WCF终结点和寻址之--AddressHead信息匹配代码 Contracts契约 using System; using System.Collections.Generic; using Syst ...

  2. centos 7 安装配置mod_security

    1.旧版本安装过程: http://blog.secaserver.com/2011/10/install-mod_security-apache2-easiest/ http://www.cnblo ...

  3. 关于"implicit declaration of function 'gettimeofday' is invalid in c99"的解决

    http://blog.csdn.net/macmini/article/details/10503799 当我们使用 gettimeofday(&time, NULL);时,会出现这样一个W ...

  4. 集合类---List

    一.ArrayList详解 1.继承关系 public class ArrayList<E> extends AbstractList<E> implements List&l ...

  5. Mac下jdk多版本管理

    网上试了.bash_profile中增加路径设置别名的方法,但是始终无法切换,只能使用jenv了. 1. 下载 jenv(来自官网) git clone https://github.com/gcui ...

  6. Linux查看进程堆栈信息命令

    jps -lvm #查看进程IDjstack -l <进程ID> # 查看进程堆栈信息

  7. Java程序执行时间

    第一种是以毫秒为单位计算的.  Java代码  //伪代码 long startTime=System.currentTimeMillis();   //获取开始时间 doSomeThing();  ...

  8. css实现web前端最美的loading加载动画！

    这些好看的loading效果,你还只会用第三方库吗?CSS3教你实现 ​前言 loading效果在实际开发中是很常见的,尤其是在Ajax请求的时候,可以给用户一个很好的交互体验. 今天这篇文章我们一起 ...

  9. J.U.C并发框架源码阅读（八）ArrayBlockingQueue

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

  10. HDU 2546.饭卡-动态规划0-1背包

    饭卡 Time Limit: 5000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Submissi ...