实现效果

如下图所示，在手机浏览器中访问京东的手机版网站(m.jd.com)，顶部会有一个广告图，点击这个广告图，如果手机上已经安装了京东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代码

<!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="http://m.chanyouji.cn/apk/chanyouji-2.2.0.apk">

        </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) {

                            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>

js 通过浏览器直接打开应用程序（IOS，Android）的更多相关文章

  1. 通过私有协议Chrome浏览器页面打开本地程序

    近期方有这样的要求:这两个系统,根据一组Chrome开展,根据一组IE开展,需要Chrome添加一个链接,然后进入IE该系统的开发.这,需要Chrome跳转到创建一个链接IE浏览器指定的页面.同时也实 ...

  2. 浏览器判断是否安装了ios/android客户端程序

    最近在做一个项目,该项目的前身是为mobile browser量身打造的一个网站.现在有这样一个需求: 当用户在用mobile browser浏览该网站的时候会点击一个按钮/超链接,通过这个按钮的点击 ...

  3. 根据浏览器内核判断是web/iOS/android/ipad/iphone 来打开不同的网站或页面

    纯js,直接分享,直接使用: var browser={ versions:function(){ var u = navigator.userAgent, app = navigator.appVe ...

  4. 上传图片转为base64格式预览并压缩图片（不兼容IE9以下浏览器，兼容移动端ios,android）

    前些天公司要求在微信移动端做上传图片并预览的功能,要求能够调用摄像头拍照并立即预览. 在网上搜了一些方法,开始自己写了个简单的功能实现代码.结果发现移动端拍照出来的图片动不动就2M+,又因为要批量上传 ...

  5. C#注册URL协议，使用浏览器打开本地程序，类似网页上点了QQ交谈打开本地QQ客户端程序

    本教程适用于Windows系统 从浏览器上打开本地程序,主要用到了本地URL协议,其实主要就是改注册表 先建立一个项目,我建的是控制台项目 在Program.cs写2个静态方法用来添加注册表.移除注册 ...

  6. 浏览器网页判断手机是否安装IOS/Android客户端程序

    IOS 原理如下: 为HTML页面中的超链接点击事件增加一个setTimeout方法. 如果在iPhone上面500ms内,本机有应用程序能解析这个协议并打开程序,则这个回调方法失效: 如果本机没有应 ...

  7. 浏览器中打开IOS应用并传参

    原创文章,转载请注明 开发中遇到这么一个问题,就是动态地指定联接服务器地址,或其它数据.如果是其它数据还好说一些,可以通过在服务器上获得的方式来弄.但如果服务器地址都需要动态指定的话.那就得另想办法了 ...

  8. js判断浏览器在PC中打开还是移动设备中打开

    var browser = {                            versions: function () {                                va ...

  9. js 判断通过什么打开（安卓、苹果、微信、QQ、浏览器、某个app应用…）

    /* 获取当前环境: 系统环境: iOS Android PC 浏览器环境 微信内置浏览器.QQ内置浏览器.正常浏览器 是否app内打开 */ var ua = navigator.userAgent ...

随机推荐

  1. vue--》分页效果（前端实现）

    <template> <div> <el-table style="width: 100%;" :data="ary"> & ...

  2. Mac下安装配置gradle

    1.下载gradle2.解压3.获得gradle解压后的路径4.修改.bash_profile文件,配置环境变量 vi ~./bash_profile export GRADLE_HOME=/User ...

  3. vue观察模式浅析

    以下是我对vue观察者模式的理解:github L6zt 加入tip 2018-10-14 最近又看到<js设计模式设计>书 推荐去搂搂不要对框架的偏见, 你真的了解jquery.angu ...

  4. [AtCoder ARC076] F Exhausted?

    霍尔定理 + 线段树? 咱学学霍尔定理... 霍尔定理和二分图完美匹配有关,具体而言,就是定义了二分图存在完美匹配的充要条件: 不妨设当前二分图左端集合为 X ,右端集合为 Y ,X 与 Y 之间的边 ...

  5. Leetcode Lect4 二叉树中的分治法与遍历法

    在这一章节的学习中,我们将要学习一个数据结构——二叉树(Binary Tree),和基于二叉树上的搜索算法. 在二叉树的搜索中,我们主要使用了分治法(Divide Conquer)来解决大部分的问题. ...

  6. vue.js（14）--自定义全局指令

    <input type="text" class="form-control" v-model="keywords" v-focus& ...

  7. [转载]浅谈JavaScript函数重载

     原文地址:浅谈JavaScript函数重载 作者:ChessZhang 上个星期四下午,接到了网易的视频面试(前端实习生第二轮技术面试).面了一个多小时,自我感觉面试得很糟糕的,因为问到的很多问题都 ...

  8. MongoDB的使用学习之（三）安装MongoDB以及一些基础操作

    原文链接:http://www.cnblogs.com/huangxincheng/archive/2012/02/18/2356595.html 此博主的 8天学通MongoDB 系列还是不错的,本 ...

  9. MacBook Pro修改hosts

    访达前往:/etc/hosts 将hosts复制到桌面修改保存 替换 附Windows hosts文件位置: C:\windows\System32\drivers\etc

  10. CCF CSP/CCSP报名费优惠的方法以及常见疑问

    目录 1. 本文地址 2. 认证作用 2.1. 高校认可 2.2. 赛事认可 2.3. 企业认可 3. 报名费价格及获取优惠的方法 3.1. CCF CSP 3.2. CCF CCSP 4. 语言与I ...