<!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. vue使用饿了么element-ui框架中的上传组件进度条无法使用，:on-progress钩子无法触发的原因

    自己写的例子都是好好的,调试了半天,在项目里怎么都出不来 最终终于找到原因: 在上传文件时要做进度显示需要用到xhr.upload.onprogress事件,此时如果你的项目里用到mock.js模拟数 ...

  2. ES6标准入门（第三版）.pdf----推荐指数⭐⭐⭐⭐⭐

    链接: https://pan.baidu.com/s/13RHsyTMNx7s1oMqQeYCm3Q 提取码: ikg3 -------------------------------------- ...

  3. windows ltsc版本没有Microsoft Store怎么解决

      [背景]以前一直都是使用windows的企业版,后来发现ltsc版本更好,这个好处在这里就不多说,懂的人自然会懂.但是发现很多应用都没有,包括Microsoft Store商店都没有.下面就是解决 ...

  4. Java面向对象--类和对象

    面向对象是相对于面向过程而言的,是软件开发方法.面向对象把相关的数据和方法组织为一个整体来看待,从更高的层次来进行系统设计,更贴近事物的自然运行模式.本篇博客介绍Java面向对象的类和对象 目录: 面 ...

  5. CTF——代码审计之变量覆盖漏洞writeup【2】

    题目: 基础: 所需基础知识见变量覆盖漏洞[1]  分析: 现在的$a=’hi’,而下面的函数需满足$a=’jaivy’才可以输出flag,那么需要做的事就是想办法覆盖掉$a原来的值. 那么出现的提示 ...

  6. HTML /和./的区别 - Web开发

    "/"访问根目录 例1 https://www.cnblogs.com/test 里有 <a href="/Edsuns"></a> 则 ...

  7. centos7下自动备份mysql数据库

    环境:centos7 .mysql5.7 第一步:创建自动备份脚本文件 mkdir backup cd backup touch backup.sh 第二步:在备份脚本文件中写入备份脚本 vim ba ...

  8. 通过css修改input的边框

    input{ border:1px solid #d2d2d2; background-color:transparent; } 可以看到主要是把背景色调成透明的颜色,从而来进行边框的设置

  9. C#.net连接Sybase的方法

    一 .ODBC方式连接 1 安装Sybase客户端,安装ODBC驱动,配置DSN<略> 2 连接代码 string strconn = "DSN=TEST;SRVR=TEST;D ...

  10. PHP pdf 转 图片

    function pdf2png($pdf,$path,$page=-1) { if(!extension_loaded('imagick')) { return false; } if(!file_ ...