<!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. Maven无法下载com.oracle:ojdbc14:jar解决方法

    问题说明:导入Maven项目时,想要添加Oracle驱动包时,Maven的pom.xml总是报Missing artifact com.oracle:ojdbc14:jar:10.2.0.1.0错. ...

  2. JUC之CountDownLatch和CyclicBarrier的区别 (转)

    CountDownLatch和CyclicBarrier的功能看起来很相似,不易区分,有一种谜之的神秘.本文将通过通俗的例子并结合代码讲解两者的使用方法和区别. CountDownLatch和Cycl ...

  3. 执行python程序的方式

    1.交互器 程序不能永久保存 主要用于简单的语法测试相关 2.文件执行

  4. Oracle体系结构中基本概念，数据库

    在Oracle体系结构中包含了基本概念即Oracle数据库与实例,如果你想要了解Oracle体系结构的话,你就必须要了解这两个基本的概念,以下是文章的具体介绍,望你浏览完以下的内容会有所收获. 数据库 ...

  5. 装饰器_python

    一.装饰器中提及的知识点 装饰器主要作用:在原函数基础上添加新功能 1.作用域:LEGB 2.高阶函数 3.闭包(在一个内部函数中,对在外部作用域(但不是在全局作用域)的变量进行引用,那么内部函数就认 ...

  6. 构造和改变一个string的其他方法

    构造一个string的其他方法: 1string s1(cp, n),cp为c风格数组名或一个指向C风格数组的指针,则执行的操作为拷贝从cp开始包括cp在内的接下来n个字符给s1,n的默认值为size ...

  7. TODO：如何模拟cpu打满，磁盘打满，网卡打满

    背景: 测试活动中,需要构造cpu打满.磁盘打满.网卡打满的场景 场景1:cpu打满 环境信息: 虚拟机,物理核数16个,每个物理核的虚拟核数1个,虚拟核数16个: [root@vm10-0-0-8 ...

  8. [CF1236D] Alice and the Doll - 模拟,STL

    [CF1236D] Alice and the Doll Description \(N \times M\)网格,有 \(K\) 个格子里有障碍物.每次经过一个格子的时候只能直走或者右转一次.初态在 ...

  9. MyBatis 动态代理开发

    MyBatis 动态代理开发 §  Mapper.xml文件中的namespace与mapper接口的类路径相同. §  Mapper接口方法名和Mapper.xml中定义的每个statement的i ...

  10. 如何在linux主机上运行/调试 arm/mips架构的binary

    如何在linux主机上运行/调试 arm/mips架构的binary 原文链接M4x@10.0.0.55 本文中用于展示的binary分别来自Jarvis OJ上pwn的add,typo两道题 写这篇 ...