<!doctype html>

<html>

<head>

<title></title>

<meta charset="utf-8">

<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no;" name="viewport" />

<script>

    // 检查是否安装app

    function openApp(e){

        var u = window.navigator.userAgent;

        var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1; //android终端或者uc浏览器

        var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);

        if(isAndroid){

            android();

        }

        if(isiOS){

            ios();

        }

    }

    function android(){

        var _clickTime = new Date().getTime();

        window.location.href = '？？？？？？？？？？？？？？？？？？'; /***打开app的协议，有安卓同事提供***/

            //启动间隔20ms运行的定时器，并检测累计消耗时间是否超过3000ms，超过则结束

        var _count = 0, intHandle;

        intHandle = setInterval(function(){

            _count++;

            var elsTime = new Date().getTime() - _clickTime;

            if (_count>=100 || elsTime > 3000 ) {

                console.log(_count)

                console.log(elsTime)

                clearInterval(intHandle);

                //检查app是否打开

                if ( document.hidden || document.webkitHidden) {

                    // 打开了

                    window.close();

                } else {

                    // 没打开

                    alert('没打开')

                    // window.location.href = "？？？？？？？？？？？？？？";//下载链接

                }

            }

        }, 20);

    }

    function ios(){

        var _clickTime = +(new Date());

        var ifr = document.createElement("iframe");

        ifr.src = "？？？？？？？？？？？？？？"; /***打开app的协议，有ios同事提供***/

        ifr.style.display = "none";

        document.body.appendChild(ifr);

        //启动间隔20ms运行的定时器，并检测累计消耗时间是否超过3000ms，超过则结束

        var _count = 0, intHandle;

        intHandle = setInterval(function(){

            _count++;

            var elsTime =  +(new Date()) - _clickTime;

            console.log(_count,elsTime,+(new Date()),_clickTime)

            if (_count>=100 || elsTime > 3000 ) {

                clearInterval(intHandle);

                document.body.removeChild(ifr);

                //检查app是否打开

                if ( document.hidden || document.webkitHidden) {

                    // 打开了

                    window.close();

                } else {

                    // 没打开

                    alert('没打开')

                    // window.location.href = "？？？？？？？？？？？？？？？";//下载链接

                }

            }

        },20);

    }

    var objbtn=document.getElementById('btn');

    objbtn.onclick=function(){

        openApp()

    }

</script>

</head>

<body style="background-color: #fff;" >

    <!--测试app调起-->

    <div id="btn" style="font-size: 40px;background: blue;color: #fff;height: 56px;text-align: center;">btn</div>

    <!--测试app调起over-->

</body>

</html>　　

重要的是 安装了app打开app，但是 不能让用户在点击确定的时候，跳转到下载页。

　　　　没安装app的用户，不能等待太久，还不到app下载页。

若通过url scheme 打开app成功，那么当前h5会进入后台，通过计时器会有明显延迟。利用时间来判断。

  • 由于安卓手机,页面进入后台，定时器setTimeout仍会不断运行，所以这里使用setInterval,较小间隔时间重复多次。来根据累计时间判断。
  • document.hidden对大于4.4webview支持很好，为页面可见性api。

ios

window.location.href='rtjr://app.rongtuojinrong.com?flag=23&pid={$pid}';

　　js无法调起 这种协议的url

<a  href="rtjr://app.rongtuojinrong.com?flag=23&pid={$pid}" ></a>

　　只能用 a标签，或者 iframe

h5 调起app 如果没安装就跳转下载的更多相关文章

  1. JS open App（未安装就跳转下载页面）

    直接上代码var APPCommon = { downAppURl : "http://**/",//下载APP地址 downWeixin: "http://**&quo ...

  2. Windows 8.1中怎么启用Framework3.5或2.0 （ 一安装就跳到下载 Win8.1自带了Framework）

    Windows 8.1中怎么启用Framework3.5或2.0      ( 一安装就跳到下载 Win8.1自带了Framework): Win+X键 打开   开始菜单 -> 命令提示符(管 ...

  3. h5页面唤起app(iOS和Android),没有安装则跳转下载页面

    浏览器和app没有通信协议,所以h5不知道用户的手机释放安装了app.因此只能是h5去尝试唤起app,若不能唤起,引导用户去下载我们的app. 微信里屏蔽了 schema 协议,如果在微信中打开h5, ...

  4. 安装oracle11g跳不过下载软件更新[INS-30131] 执行安装程序验证所需的初始设置失败

    链接:https://www.jb51.net/article/88944.htm 问题已解决: 解决方法 第一步: 控制面板>所有控制面板项>管理工具>服务>SERVER 启 ...

  5. H5页面中尝试调起APP

    安卓版本5.0以上 IOS版本10.0以上 采用事件触发的方式处理唤醒APP 市面上常见的功能 这种功能现如今应该非常普遍了,淘宝H5,知乎H5等等... 点击后会调起APP或者打开下载页面或者直接进 ...

  6. java版微信公众号支付(H5调微信内置API)

    最近需要做微信公众号支付,网上找了大堆的代码,大多都只说了个原理,自己踩了太多坑,所有的坑,都会再下面的文章中标注,代码我也贴上最全的(叫我雷锋)!!! 第一步:配置支付授权目录 你需要有将你公司的微 ...

  7. Android H5调起原生微信或支付宝支付

    Android H5调起原生微信或支付宝支付 WebView调用原生微信或支付宝回调:其原理就是在shouldOverrideUrlLoading(final WebView view, String ...

  8. 网页调起App之应用实践

    声明:本文由入驻搜狐公众平台的作者撰写,除搜狐官方账号外,观点仅代表作者本人,不代表搜狐立场.举报 新春佳节即将到来,北京的上地&西二旗.望京&国贸.五道口&中关村地区等程序员 ...

  9. 【Android】解决微信调起支付接口没反应，调不起来微信的问题

    原文:[Android]解决微信调起支付接口没反应,调不起来微信的问题 //#前言 吐槽一下,微信支付的sdk真难用,文档混乱,坑不少. 正文:可能引起这种情况的问题 1. 最不能出现的 你的APPI ...

随机推荐

  1. zabbix4.4.2安装部署

    1.下载阿里的源,执行 wget -O /etc/yum.repos.d/CentOS-Base.repo http://mirrors.aliyun.com/repo/Centos-7.repo 2 ...

  2. 并查集-E - Wireless Network

    E - Wireless Network An earthquake takes place in Southeast Asia. The ACM (Asia Cooperated Medical t ...

  3. cocos Studio 特效文件播放失败

    可能是json文件中file的Path不对引起的.因为生成的path是根据文件在项目中的path生成的,即当此特效不是项目的一级目录时,会带有项目中上级目录,导致找不到文件(不会报错). ccs.lo ...

  4. 理解JWT（JSON Web Token）认证

    理解JWT(JSON Web Token)认证 最近想做个小程序,需要用到授权认证流程.以前项目都是用的 OAuth2 认证,但是Sanic 使用OAuth2 不太方便,就想试一下 JWT 的认证方式 ...

  5. jupyter快捷键使用

    1. 服务启动与停止 环境为windows10系统 ctrl+R输入cmd,输入命令jupyter notebook启动 使用Control-c停止服务 2.常用快捷键 模式切换 当前cell侧边为蓝 ...

  6. Centsos7 aria2

    wget -N --no-check-certificate https://raw.githubusercontent.com/ToyoDAdoubi/doubi/master/aria2.sh & ...

  7. ubuntu中安装和卸载apache2

    1. 安装apache2 安装命令: sudo apt-get install apache2 启动/停止/重启apache2: service apache2 start/stop/restart ...

  8. DM642学习：CMD、GEL文件

    在建立ccs工程的时候,cmd文件和gel文件非常重要,如不能配置好会出现一些莫名其妙的问题. 1. CMD文件: 不同的DSP芯片内集成的存储器大小各异,但其配置方式是类似的.大家可通过查阅DSP芯 ...

  9. orcad常用库文件

    ORCAD CAPTURE元件库介绍 AMPLIFIER.OLB amplifier 共182个零件,存放模拟放大器IC,如CA3280,TL027C,EL4093等. ARITHMETIC.OLB ...

  10. C语言注释符号

    同学们认为注释很简单,那我来看看下面的代码是否正确? 1.似是而非的问题 int main() { int/*...*/i; char* s = "abcdefgh //hijklmn&qu ...