如何在html5中喚醒APP

發(fā)布時間：2022-04-29 10:36:31 來源：億速云閱讀：166 作者：iii 欄目：大數(shù)據(jù)

這篇“如何在html5中喚醒APP”文章的知識點大部分人都不太理解，所以小編給大家總結(jié)了以下內(nèi)容，內(nèi)容詳細(xì)，步驟清晰，具有一定的借鑒價值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來看看這篇“如何在html5中喚醒APP”文章吧。

代碼如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>打開App</title>
</head>
<body>
<a href="luwei://" id="open">打開應(yīng)用</a>
</body>
</html>

點擊上面的H5頁面中的鏈接將會嘗試喚醒對應(yīng)app，在一些瀏覽器中，可能會彈出一個提示框，詢問用戶是否允許打開應(yīng)用。

如果打開的 scheme 在本地沒有對應(yīng)的 app，則點擊不會反應(yīng)。

當(dāng)然還可以使用 JavaScript 代碼打開，只需要添加相應(yīng)的事件觸發(fā)和處理即可。

在JavaScript代碼中打開連接有以下幾種方式：

新建一個隱藏的 iframe ，地址指向需要打開的url
使用 window.location 或者 window.location.href 刷新當(dāng)前頁面
新建一個隱藏的 a 標(biāo)簽，地址指向打開的url，并觸發(fā)打開鏈接事件
動態(tài)創(chuàng)建一個script腳本，在這個腳本中新建一個a標(biāo)簽并打開

// 打開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設(shè)備喚醒App的功能，并不能判斷是否已安裝App，沒有安裝即跳轉(zhuǎn)至下載鏈接。

瀏覽器判斷是否安裝應(yīng)用

在瀏覽器實際上是沒有能力判斷手機里是否安裝了某個App的，所以只能夠采取一種投機取巧的方式。

在JavaScript中判斷頁面是否進入后臺來判斷打開成功。Html5提供了下列事件和屬性可以利用：

pagehide : 頁面隱藏時觸發(fā)
visibilitychange : 頁面隱藏沒有在當(dāng)前顯示時觸發(fā)(切換tab也會觸發(fā)該事件)
document.hidden ：當(dāng)頁面隱藏時，該值為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 的按鈕添加點擊事件處理函數(shù)
    document.getElementById('openBtn').onclick = function () {
        window.location.href = scheme;  // 嘗試打開 scheme 
 
        // 設(shè)置3秒的定時下載任務(wù)，3秒之后下載app
        downloader = setTimeout(function(){
            if(isAndroid) {
                window.location.href = andDownload;
            }
            if(isIOS) {
                window.location.href = iosDownload;
            }
          
        }, 3000);
    };
 
    document.addEventListener('visibilitychange webkitvisibilitychange', function () {
        // 如果頁面隱藏，推測打開scheme成功，清除下載任務(wù)
        if (document.hidden || document.webkitHidden) {
            clearTimeout(downloader);
        }
    });
    window.addEventListener('pagehide', function() {
        clearTimeout(downloader);
    });

以上就是關(guān)于“如何在html5中喚醒APP”這篇文章的內(nèi)容，相信大家都有了一定的了解，希望小編分享的內(nèi)容對大家有幫助，若想了解更多相關(guān)的知識內(nèi)容，請關(guān)注億速云行業(yè)資訊頻道。

向AI問一下細(xì)節(jié)

如何在html5中喚醒APP

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽