html唤醒手机app,怎么在html5中唤醒APP

怎么在html5中唤醒APP

发布时间：2021-06-06 16:24:00

来源：亿速云

阅读：90

作者：Leah

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

打开App

打开应用

点击上面的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的方法了吗？如果还想学到更多技能或想了解更多相关内容，欢迎关注亿速云行业资讯频道，感谢各位的阅读！