文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

怎么在html5中唤醒APP

2023-06-09 13:05

关注

怎么在html5中唤醒APP?相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>打开App</title></head><body><a href="luwei://" id="open">打开应用</a></body></html>

点击上面的H5页面中的链接将会尝试唤醒对应app,在一些浏览器中,可能会弹出一个提示框,询问用户是否允许打开应用。

如果打开的 scheme 在本地没有对应的 app,则点击不会反应。

当然还可以使用 JavaScript 代码打开,只需要添加相应的事件触发和处理即可。

在JavaScript代码中打开连接有以下几种方式:

// 打开url的方式var urlOpen = {  // 在ios支持不好    'iframe' : function(url) {        var iframe = document.createElement('iframe');        iframe.style.display = 'none';        iframe.src = url;        document.body.appendChild(iframe);    },    'location' : function(url) {        window.location.href = url;    },    'href' : function(url) {        var a = document.createElement('a');        a.style.display = 'none';        a.href = url;        document.body.appendChild(a);        a.click();    },    'script' : function(url) {        var script = document.createElement('script');        script.setAttribute('type', 'test/javascript');        script.innerHTML = '(function(){' +            'var a = document.createElement("a");' +            'a.style.display = "none";' +            'a.href = "' + url.replace(/"/g, '\\"') + '";' +            'document.body.appendChild(a);' +            'a.click();' +            '})()';        document.body.appendChild(script);    },    'open' : function(url) {        window.open(url);    }};

以上方法是只是解决了在已安装App设备唤醒App的功能,并不能判断是否已安装App,没有安装即跳转至下载链接。

浏览器判断是否安装应用

在浏览器实际上是没有能力判断手机里是否安装了某个App的,所以只能够采取一种投机取巧的方式。

在JavaScript中判断页面是否进入后台来判断打开成功。Html5提供了下列事件和属性可以利用:

上面这些事件或者属性并不是所有浏览器都支持。下面是一个给出为id为openBtn 的按钮添加打开scheme或者下载事件的例子,但对于Android 4.4版本以下则不支持

var downloader,     scheme = 'luwei://',  // 需要打开的app scheme 地址    iosDownload='http://xxx.com';  // 如果打开scheme失效的app下载地址    andDownload = 'http://xxx.com';    var u = navigator.userAgent;    var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1; //g    var isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端// 给 id 为 openBtn 的按钮添加点击事件处理函数    document.getElementById('openBtn').onclick = function () {        window.location.href = scheme;  // 尝试打开 scheme          // 设置3秒的定时下载任务,3秒之后下载app        downloader = setTimeout(function(){            if(isAndroid) {                window.location.href = andDownload;            }            if(isIOS) {                window.location.href = iosDownload;            }                  }, 3000);    };     document.addEventListener('visibilitychange webkitvisibilitychange', function () {        // 如果页面隐藏,推测打开scheme成功,清除下载任务        if (document.hidden || document.webkitHidden) {            clearTimeout(downloader);        }    });    window.addEventListener('pagehide', function() {        clearTimeout(downloader);    });

看完上述内容,你们掌握怎么在html5中唤醒APP的方法了吗?如果还想学到更多技能或想了解更多相关内容,欢迎关注编程网行业资讯频道,感谢各位的阅读!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯