zoukankan      html  css  js  c++  java
  • 浏览器网页推断手机是否安装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的功能,解决方式有两个:

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

    測试案例二维码:


    效果例如以下:

        

    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

    生成对应二维码:

    微信扫一扫打开网页(安卓版):


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

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

    微信扫一扫打开网页(IOS版):

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

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










  • 相关阅读:
    vue3.0基本使用
    node 版本升级
    Steam游戏《Northgard(北境之地)》修改器制作
    万能WEB弹出框,js随意适配
    数据湖了解
    操作系统(一)
    无题
    基于林业害虫识别系统的缺陷分析
    美化Android下拉刷新
    软件测试
  • 原文地址:https://www.cnblogs.com/yfceshi/p/6814297.html
Copyright © 2011-2022 走看看