H5喚起App,本地沒有則下載

H5喚起App,本地沒有則下載

如果只想單純的打開app,而不去判斷是否已經安裝,直接使用scheme協議就行了。

如果想實現沒有安裝就下載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);
    });


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章