移動端從網頁調起客戶端應用

比如想在網頁中調起支付寶，我們可以創建一個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);
};