h5页面唤起app如果没安装就跳转下载(iOS和Android)


Posted in HTML / CSS onJune 03, 2020

h5页面唤起app如果没安装就跳转下载(iOS和Android)

浏览器和app没有通信协议,所以h5不知道用户的手机释放安装了app。因此只能是h5去尝试唤起app,若不能唤起,引导用户去下载我们的app。

微信里屏蔽了 schema 协议,如果在微信中打开h5,则会提示用户在浏览器中打开。<!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如果没安装就跳转下载(iOS和Android)的文章就介绍到这了,更多相关h5页面唤起app内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木!

HTML / CSS 相关文章推荐
css3 旋转按钮 使用CSS3创建一个旋转可变色按钮
Dec 31 HTML / CSS
带有css3动画效果的兼容多浏览器简单导航条示例
Jan 26 HTML / CSS
一款利用纯css3实现的win8加载动画的实例分析
Dec 11 HTML / CSS
HTML5+CSS3 实现灵动的动画 TAB 切换效果(DEMO)
Sep 15 HTML / CSS
纯CSS3实现圆圈动态发光特效动画的示例代码
Mar 08 HTML / CSS
使用html5制作loading图的示例
Apr 14 HTML / CSS
让IE下支持Html5的placeholder属性的插件
Sep 02 HTML / CSS
利用HTML5绘制点线面组成的3D图形的示例
May 12 HTML / CSS
解析HTML5的存储功能和web SQL的相关操作方法
Feb 19 HTML / CSS
HTML5实现页面切换激活的PageVisibility API使用初探
May 13 HTML / CSS
浅析HTML5:'data-'属性的作用
Jan 23 HTML / CSS
html2 canvas svg不能识别的解决方案
Jun 03 HTML / CSS
html5视频自动横过来自适应页面且点击播放功能的实现
Jun 03 #HTML / CSS
使用Html5 Stream开发实时监控系统
Jun 02 #HTML / CSS
Html5 canvas画图白板踩坑
Jun 01 #HTML / CSS
HTML5页面嵌入小程序没有返回按钮及返回页面空白的问题
May 28 #HTML / CSS
HTML5实现直播间评论滚动效果的代码
May 27 #HTML / CSS
html5拖拽应用记录及注意点
May 27 #HTML / CSS
recorder.js 基于Html5录音功能的实现
May 26 #HTML / CSS
You might like
windows下zendframework项目环境搭建(通过命令行配置)
2012/12/06 PHP
php教程之魔术方法的使用示例(php魔术函数)
2014/02/12 PHP
PHP环形链表实现方法示例
2017/09/15 PHP
PHP5.0 TIDY_PARSE_FILE缓冲区溢出漏洞的解决方案
2018/10/14 PHP
关于laravel后台模板laravel-admin select框的使用详解
2019/10/03 PHP
JavaScript判断文件上传类型的方法
2014/09/02 Javascript
Javascript表单验证要注意的事项
2014/09/29 Javascript
javascript实现倒计时(精确到秒)
2015/06/26 Javascript
JS控制弹出悬浮窗口(一览画面)的实例代码
2016/05/30 Javascript
js操作浏览器的参数方法
2017/01/21 Javascript
使用vue.js实现checkbox的全选和多个的删除功能
2017/02/17 Javascript
基于Vue单文件组件详解
2017/09/15 Javascript
Angular如何在应用初始化时运行代码详解
2018/06/11 Javascript
jQuery 操作 HTML 元素和属性的方法
2018/11/12 jQuery
d3绘制基本的柱形图的实现代码
2018/12/12 Javascript
[15:58]DOTA2国际邀请赛采访专栏:Tongfu.Sansheng&KingJ,DK.rOtk
2013/08/08 DOTA
Python中的变量和作用域详解
2016/07/13 Python
python 爬虫出现403禁止访问错误详解
2017/03/11 Python
利用python写个下载teahour音频的小脚本
2017/05/08 Python
机器学习实战之knn算法pandas
2019/06/22 Python
详解PyTorch手写数字识别(MNIST数据集)
2019/08/16 Python
python opencv实现gif图片分解的示例代码
2019/12/13 Python
Lookfantastic法国官网:英国知名美妆购物网站
2017/10/28 全球购物
写一个在SQL Server创建表的SQL语句
2012/03/10 面试题
自立自强的名人事例
2014/02/10 职场文书
教师校本培训方案
2014/02/26 职场文书
2014年小学植树节活动方案
2014/03/02 职场文书
党支部综合考察材料
2014/05/19 职场文书
装饰公司活动策划方案
2014/08/23 职场文书
新店开张活动方案
2014/08/24 职场文书
大学生学习计划书
2014/09/15 职场文书
2014年商场国庆节活动策划方案
2014/09/16 职场文书
大学感恩节活动总结
2015/05/05 职场文书
小学生读书笔记范文
2015/06/30 职场文书
党员干部学习十八届五中全会精神心得体会
2016/01/05 职场文书
教您怎么制定西餐厅运营方案 ?
2019/07/05 职场文书