这篇“如何在html5中唤醒APP”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇“如何在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代码中打开连接有以下几种方式：
新建一个隐藏的 iframe ，地址指向需要打开的url
使用 window.location 或者 window.location.href 刷新当前页面
新建一个隐藏的 a 标签，地址指向打开的url，并触发打开链接事件
动态创建一个script脚本，在这个脚本中新建一个a标签并打开
// 打开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提供了下列事件和属性可以利用：
pagehide : 页面隐藏时触发
visibilitychange : 页面隐藏没有在当前显示时触发(切换tab也会触发该事件)
document.hidden ： 当页面隐藏时，该值为true，显示时为false
上面这些事件或者属性并不是所有浏览器都支持。下面是一个给出为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”这篇文章的内容，相信大家都有了一定的了解，希望小编分享的内容对大家有帮助，若想了解更多相关的知识内容，请关注亿速云行业资讯频道。
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
