<!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. java通过浏览器请求头（User-Agent）获取访问者设备信息以及系统版本

    个人博客 地址:http://www.wenhaofan.com/article/20181125220342 在开发AutuBlog项目时需要做后台的登录记录,想起浏览器的User-Agent,于是 ...

  2. Docker之设置加速器

    在Docker从仓库下载镜像是非常慢的,所以今天搞一个Docker设置加速器教程. 1. 创建一个Docker的配置文件. sudo vim /etc/docker/daemon.json 2. 编写 ...

  3. Android 本地化

    语言配置修饰符来自于ISO639-1标准代码.中文修饰符是-zh. 在res文件夹下创建raw-zh和values-zh文件夹.对应语言的资源文件放入期内. 当Android系统设置的语言为中文时,程 ...

  4. 在cc.EventListener.TOUCH_ONE_BY_ONE事件中判断拖动物离哪边近飞向那边

    需将拖动物坐标和要飞向物坐标转化为整个layer的坐标,因为人们判断远近是根据整个layer来看的.

  5. 【转】VS2017离线安装

    [转自]https://www.cnblogs.com/feigao/p/8409606.html 第一步:下载离线安装包 https://www.visualstudio.com/zh-hans/d ...

  6. CentOS安装RabbitMQ-yum

    CentOS安装RabbitMQ----yum安装 一.安装erlang 由于CentOS没有erlang源,需用 第三方源(http://rpmfusion.org/Configuration) 1 ...

  7. vue 3.0 项目搭建移动端 (七) 安装Vant

    # 通过 npm 安装 npm i vant -S 安装完配置 babel.config.js module.exports = { presets: ['@vue/app'], plugins: [ ...

  8. 【Python】time库

  9. jsp连接数据库增删改查

    一,创建表 二.将jar包复制导入到lib文件夹下 三.创建工具包连接数据库 package com.bill.util; import java.sql.Connection; import jav ...

  10. bitlocker对磁盘进行加密解密

    1,bitlocker是什么? BitLocker即Windows BitLocker驱动器加密.是微软在Windows Vista中新增的一种数据保护功能.使用BitLocker可以加密磁盘.主要用 ...