使用iframe從網頁調起移動端應用

比如想在網頁中調起支付寶，我們可以創建一個iframe，src為：

alipayqr://platformapi/startapp?saId=10000007&clientVersion=3.7.0.0718&qrcode={支付二維碼掃描的url}

瀏覽器接收到這個url請求發現未知協議，會交給系統處理，系統就能調起支付寶客戶端了。我們還能趁機檢查一下用戶是否安裝客戶端：給iframe設置一個3-5秒的css3的transition過渡動畫，然后監聽動畫完成事件，如果用戶安裝了客戶端，那么系統會調起，並將瀏覽器轉入后台運行，進入后台的瀏覽器一般不會再執行css動畫，這樣，我們就能通過判斷css動畫執行的時長是否超過預設來判斷用戶是否安裝某個客戶端了：

 

/**
 * 調起客戶端
 * @param url {String}
 * @param onSuccess {Function}
 * @param onFail {Function}
 */
module.exports = function(url, onSuccess, onFail){
    // 記錄起始時間
    var last = Date.now();

    // 創建一個iframe
    var ifr = document.createElement('IFRAME');
    ifr.src = url;
    // 飄出屏幕外
    ifr.style.position = 'absolute';
    ifr.style.left = '-1000px';
    ifr.style.top = '-1000px';
    ifr.style.width = '1px';
    ifr.style.height = '1px';
    // 設置一個4秒的動畫用於檢查客戶端是否被調起
    ifr.style.webkitTransition = 'all 4s';
    document.body.appendChild(ifr);
    setTimeout(function(){
        // 監聽動畫完成時間
        ifr.addEventListener('webkitTransitionEnd', function(){
            document.body.removeChild(ifr);
            if(Date.now() - last < 6000){
                // 如果動畫執行時間在預設范圍內，就認為沒有調起客戶端
                if(typeof onFail === 'function'){
                    onFail();
                }
            } else if(typeof onSuccess === 'function') {
                // 動畫執行超過預設范圍，認為調起成功
                onSuccess();
            }
        }, false);
        // 啟動動畫
        ifr.style.left = '-10px';
    }, 0);
};