当前位置:主页>技术研究院>网页设计>正文

HTML打开APP

2014-12-11 来源:未知 责任编辑:佚名 点击:

分享到:

如果本地已经安装了指定Android应用,就直接打开它;如果没有安装,则直接下载该应用的安装文件(也可以跳转到下载页面)。

实现效果

如下图所示,在手机浏览器中访问京东的手机版网站(m.jd.com),顶部会有一个广告图,点击这个广告图,如果手机上已经安装了京东App,则直接打开,如果没有安装,则开始下载。

HTML打开APP

实现方式

1.为Android应用的启动Activity设置一个Schema,如下:

<data android:host="splash" android:scheme="cundong"/>

 

2.用户点击浏览器中的链接时,在动态创建一个不可见的iframe,并且让这个iframe去加载步骤1中的Schema,如下:

var ifr = document.createElement('iframe');ifr.src="cundong://splash"

 

3,如果在指定的时间内没有跳转成功,则当前页跳转到apk的下载地址(或下载页),如下:

window.location = download_url;

 

HTML代码

?
12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061 <!doctype html><html>    <head>        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">         <meta name="apple-mobile-web-app-capable" content="yes">        <meta name="apple-mobile-web-app-status-bar-style" content="black"/>         <title>this's a demo</title>        <meta id="viewport" name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,minimal-ui">    </head>    <body>        <div>            <a id="J-call-app" href="javascript:;" class="label">立即打开&gt;&gt;</a>            <input id="J-download-app" type="hidden" name="storeurl" value="https://passport.sina.cn/sso/jmp?action=iosapp">        </div>         <script>            (function(){                var ua = navigator.userAgent.toLowerCase();                var t;                var config = {                    /*scheme:必须*/                    scheme_IOS: 'cundong://',                    scheme_Adr: 'cundong://splash',                    download_url: document.getElementById('J-download-app').value,                    timeout: 600                };                 function openclient() {                    var startTime = Date.now();                     var ifr = document.createElement('iframe');                      ifr.src = ua.indexOf('os') > 0 ? config.scheme_IOS : config.scheme_Adr;                    ifr.style.display = 'none';                    document.body.appendChild(ifr);                     var t = setTimeout(function() {                        var endTime = Date.now();                         if (!startTime || endTime - startTime < config.timeout + 200) { //如果装了app并跳到客户端后,endTime - startTime 一定> timeout + 200                            window.location = config.download_url;                        } else {                         }                    }, config.timeout);                     window.onblur = function() {                        clearTimeout(t);                    }                }                window.addEventListener("DOMContentLoaded", function(){                    document.getElementById("J-call-app").addEventListener('click',openclient,false);                 }, false);            })()        </script>    </body></html>

 

AndroidMainfext.xml

<activity     android:name=".activity.LauncherActivity"     android:configChanges="orientation|keyboardHidden|navigation|screenSize"     android:label="@string/app_name"     android:screenOrientation="portrait" >        <intent-filter>           <action android:name="android.intent.action.MAIN" />           <category android:name="android.intent.category.LAUNCHER" />        </intent-filter>        <intent-filter>            <action android:name="android.intent.action.VIEW" />            <category android:name="android.intent.category.DEFAULT" />            <category android:name="android.intent.category.BROWSABLE" />            <data android:host="splash" android:scheme="cundong" />       </intent-filter></activity>

Copyright © 2007-2014 CDNET.ORG.CN. 成都网络行业协会 版权所有
54_1 54_2 54_3 54_4 54_5 54_6 54_7 54_8 54_9 54_10 54_11 54_12 54_13 54_14 54_15 54_16 54_17 54_18 54_19 54_20 54_21 54_22 54_23 54_24 54_25 54_26 54_27