实现效果

如下图所示，在手机浏览器中访问京东的手机版网站(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. jdbcTemplate和namedParameterJdbcTemplate

    jdbcTemplatejdbcTemplate配置<!-- 注入jdbcTemplate 官方工具包 --> <bean id="jdbc" class=&qu ...

  2. 编程语言分类,Python代码执行,应用程序使用文件的三步骤,变量,常量,垃圾回收机制

    编程语言分为 机器语言(直接用二进制01跟计算机直接沟通交流,直接操作硬件) 优点:计算机能够直接读懂,速度快 缺点:开发效率极低 汇编语言(用简单的英文标签来表示二进制数,直接操作硬件) 优点:开发 ...

  3. 详解微信小程序支付流程

    转发博主 https://blog.csdn.net/qq_38378384/article/details/80882980 花了几天把小程序的支付模块接口写了一下,可能有着公众号开发的一点经验,没 ...

  4. 【洛谷p3958】奶酪

    奶酪[题目链接] 题前废话不知道说啥了啊qwq(越来越沉默寡言) 好了看题: SOLUTION: 思路的话,大概是搜索,然后大概广搜??? 但是我们今天写深搜(也是听xcg大佬讲了以后的整理博) 首先 ...

  5. [2019杭电多校第二场][hdu6602]Longest Subarray(线段树)

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=6602 题目大意为求最长的区间,满足C种数字在区间内要么不出现,要么出现的次数都不小于K. 大致的分析一 ...

  6. linux内核的gpiolib详解

    #include <linux/init.h> // __init __exit #include <linux/module.h> // module_init module ...

  7. 欧拉函数&欧拉定理&降幂 总结

    欧拉函数&欧拉定理&降幂 总结 标签:数学方法--数论 阅读体验:https://zybuluo.com/Junlier/note/1300214 这年头不总结一下是真的容易忘,老了老 ...

  8. 树莓派VNC Viewer 远程桌面配置教程

    作为一个刚入门的小白,你还在为如何配置树莓派的远程桌面控制苦恼? 是否希望能够每次在树莓派上无须接上显示器.键盘.鼠标以及走到放置你的树莓派的地方就可以运行指令! 在这篇树莓派文章中,你将学到如何在树 ...

  9. 浏览器是怎样工作的（一）：基础知识 转载http://ued.ctrip.com/blog/how-browsers-work-i-basic-knowledge.html

    译注: 前两天看到一篇不错的英文文章,叫做 How browsers work,该文概要的介绍了浏览器从头到尾的工作机制,包括HTML等的解析,DOM树的生成,节点与CSS的渲染等等,对于想学习浏览器 ...

  10. 查看Json的结构及内容：JsonViewerPackage

    下载链接:http://jsonviewer.codeplex.com/ 安装的过程简单,这里就不一一叙述. 找到JsonViewer 打开之后 点击Viewer 旁边的Text 放入你的Json 测 ...