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. 函数atof,atoi，atol，strtod，strtol，strtoul 描述

    函数atof,atoi,atol,strtod,strtol,strtoul atof(将字串转换成浮点型数) 相关函数 atoi,atol,strtod,strtol,strtoul表头文件 #in ...

  2. DropZone图片上传控件的使用

    前台代码: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w ...

  3. python接口自动化3-自动发帖（session）【转载】

    本篇转自博客:上海-悠悠 原文地址:http://www.cnblogs.com/yoyoketang/tag/python%E6%8E%A5%E5%8F%A3%E8%87%AA%E5%8A%A8%E ...

  4. Laravel中setAttribute和queryScope的用法

    setAttribute使用场景: 数据在存入数据库的时候需要进行预先处理,每次都会写很多重复代码,使用 setAttribute之后就可以在数据填充时自动完成. setAttribute的写法:se ...

  5. sersync+rsync作实时同事

    http://liubao0312.blog.51cto.com/2213529/1677586 配置搞定,参照上面的文章,用时搞一搞就OK. 注意IPTABLES的配置及环境变量 最简陋配置: rs ...

  6. ubuntu常用终端命令

    # ctrl + l - 清屏 . cLear# ctrl + c - 终止命令. # ctrl + d - 退出 shell,好像也可以表示EOF. # ctrl + z - 将当前进程置于后台,f ...

  7. HDU 3466 Proud Merchants【贪心 + 01背包】

    Recently, iSea went to an ancient country. For such a long time, it was the most wealthy and powerfu ...

  8. Educational Codeforces Round 33 (Rated for Div. 2) B. Beautiful Divisors【进制思维/打表】

    B. Beautiful Divisors time limit per test 2 seconds memory limit per test 256 megabytes input standa ...

  9. Codeforces 1018D D. Order book

    解法:用l,r分别代表buy的最大值和sell的最小值,add时,若添加的值在l,r之间,则该值有可能作为下一次accept的值 accept x时,x只能在区间[l,r]中,否则无解,若x为l或r, ...

  10. android如何取消闹铃

    取消闹钟: Intent intent = new Intent(context, TestReceiver.class); PendingIntent pi = PendingIntent.getB ...