這篇“如何在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進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
