怎么在html5中喚醒APP-創(chuàng)新互聯(lián)

怎么在html5中喚醒APP？相信很多沒有經(jīng)驗的人對此束手無策，為此本文總結(jié)了問題出現(xiàn)的原因和解決方法，通過這篇文章希望你能解決這個問題。

站在用戶的角度思考問題，與客戶深入溝通，找到吉利網(wǎng)站設(shè)計與吉利網(wǎng)站推廣的解決方案，憑借多年的經(jīng)驗，讓設(shè)計與互聯(lián)網(wǎng)技術(shù)結(jié)合，創(chuàng)造個性化、用戶體驗好的作品，建站類型包括：網(wǎng)站設(shè)計制作、網(wǎng)站建設(shè)、企業(yè)官網(wǎng)、英文網(wǎng)站、手機端網(wǎng)站、網(wǎng)站推廣、主機域名、網(wǎng)絡(luò)空間、企業(yè)郵箱。業(yè)務(wù)覆蓋吉利地區(qū)。

<!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)。

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

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

新建一個隱藏的 iframe ，地址指向需要打開的url
使用 window.location 或者 window.location.href 刷新當前頁面
新建一個隱藏的 a 標簽，地址指向打開的url，并觸發(fā)打開鏈接事件
動態(tài)創(chuàng)建一個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設(shè)備喚醒App的功能，并不能判斷是否已安裝App，沒有安裝即跳轉(zhuǎn)至下載鏈接。

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

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

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

pagehide : 頁面隱藏時觸發(fā)
visibilitychange : 頁面隱藏沒有在當前顯示時觸發(fā)(切換tab也會觸發(fā)該事件)
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 的按鈕添加點擊事件處理函數(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);
    });

看完上述內(nèi)容，你們掌握怎么在html5中喚醒APP的方法了嗎？如果還想學(xué)到更多技能或想了解更多相關(guān)內(nèi)容，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝各位的閱讀！

標題名稱：怎么在html5中喚醒APP-創(chuàng)新互聯(lián)
網(wǎng)站地址：http://aaarwkj.com/article36/gjhpg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站設(shè)計公司、虛擬主機、企業(yè)網(wǎng)站制作、定制開發(fā)、關(guān)鍵詞優(yōu)化、移動網(wǎng)站建設(shè)

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

欧美一级特黄大片做受成人-亚洲成人一区二区电影-激情熟女一区二区三区-日韩专区欧美专区国产专区

怎么在html5中喚醒APP-創(chuàng)新互聯(lián)