浏览器网页推断手机是否安装IOS/Androidclient程序

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程序的更多相关文章

浏览器网页判断手机是否安装IOS/Android客户端程序
IOS 原理如下: 为HTML页面中的超链接点击事件增加一个setTimeout方法. 如果在iPhone上面500ms内,本机有应用程序能解析这个协议并打开程序,则这个回调方法失效: 如果本机没有应 ...
Android之——获取手机安装的应用程序
转载请注明出处:http://blog.csdn.net/l1028386804/article/details/47114331 前几篇有关Android的博文中.向大家介绍了几个项目中经常使用的有 ...
Android-获取手机已经安装的程序
有时候我们会查询手机里面是否安装了某个程序,或者获取已经安装软件名称的集合. android这边提供了相应的接口. [java] view plaincopy final PackageManager ...
使用Xcode7非美刀购买开发者帐号,非越狱安装IOS ipa
做苹果开发,需要至少99美刀注册开发者帐号,这样写出来的程序才可以在真机上运行调试,才可以发布到app store,现在xcode7之后苹果有了调整,除了发布到app store还是需要美刀帐号,其它 ...
根据判断PC浏览器类型和手机屏幕像素自动调用不同CSS的代码
1.媒体查询方法在 css 里面这样写 -------------------- @media screen and (min-width: 320px) and (max-width: 480px) ...
如何在浏览器网页中实现java小应用程序的功能
我们知道,java语言的运用就是面向对象实现功能,和c不同,java语言对于程序员来说,运用起来更为简便. 小应用程序与应用程序不同,小应用程序只能在与Java兼容的容器中运行,可以嵌入在HTML网页 ...
android推断手机是否root
关于推断手机是否已经root的方法.假设app有一些特殊功能须要root权限,则须要推断是否root. 比方一些市场下载完app后自己主动安装. /** * @author Kevin Kowalew ...
安卓手机上安装谷歌 play 商店
安卓手机上安装谷歌 play 商店安卓(Android)就是现在流行的智能手机系统,它是由Google公司和开放手机联盟领导及开发.由于安卓系统的底层代码(AOSP)是开源的,以GPL和Apach ...
苹果电脑怎么给浏览器安装Folx扩展程序
Folx是一款MacOS专用的老牌综合下载管理软件,它的软件界面简洁,应用简单方便,下载管理及软件设置灵活而强大.Folx不但能够进行页面链接下载.Youtube视频下载,而且还是专业的BT下载工具. ...

随机推荐

NS_AVAILABLE_IOS(6_0)
http://www.cocoachina.com/bbs/read.php?tid=241951 一个简单的小问题,请诸位大侠帮助给看看 ,新手 ,勿拍砖本帖属于CocoaChina会 ...
VS程序打包软件
由于InstallShield Limited Edition for Visual Studio的教程.资料太少,所以我今天才决定写这个文章,专门针对C#项目打包,包括打包集成Microsoft . ...
tcpreplay 缓存算法研究
一. 缓存算法 1.1 算法目的流量拆分算法的运算会明显影响包的发送速率,为了提高发送速率, tcpreplay 使用了缓存机制,该部分代码也封装在tcpprep工具里,运行 tcpprep ( ...
Mac下Lua环境搭建
lua源文件下载安装到官网安装了lua包,我安装的是 lua-5.3.1 解压之后,命令行cd进入到src目录下,输入make macosx 完成后cd ..到上一层目录, 输入sudo make ...
C语言中字符串的格式化
本文整理转载自:http://wenku.baidu.com/view/065d62fff705cc1755270989.html C语言中格式字符串的一般形式为: %[标志][输出最小宽度][.精度 ...
Git-添加或删除文件
添加文件 $ git add blash $ git commit "add blash file" $ git push -u origin master 删除文件 $ gi ...
flask框架基本使用(1)(基本框架搭建与请求参数接收)
#转载请留言联系 Flask 是一个 Python 实现的 Web 开发微框架. 1.搭建Flask开发环境在你开发项目的时候,你拥有的项目越多,同时使用不同版本的 Python 工作的可能性也就越 ...
Future使用场景与分析
前面分享了CountDownLatch的用法,但是由于分享过程中,发现有些朋友,问我Future与CountDownLatch的有什么区别? 答案:只是concurrent包下的并发帮助工具类,两者并 ...
Codeforces Round #267 (Div. 2) B. Fedor and New Game【位运算/给你m+1个数让你判断所给数的二进制形式与第m+1个数不相同的位数是不是小于等于k，是的话就累计起来】
After you had helped George and Alex to move in the dorm, they went to help their friend Fedor play ...
Linked List Random Node -- LeetCode
Given a singly linked list, return a random node's value from the linked list. Each node must have t ...

浏览器网页推断手机是否安装IOS/Androidclient程序

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

随机推荐

热门专题