【JavaScript】JS 判斷使用者是否安裝應用程式 App 並啟動

11 個月前 |

本篇文章將教導如何利用 JavaScript 寫出當使用者裝置有安裝那應用程式時,就啟動應用程式,否則前往指定網頁的功能!

文章使用 Line 做示範。

  關於 URL scheme 的解釋請看 

https://zh.wikipedia.org/wiki/%E7%BB%9F%E4%B8%80%E8%B5%84%E6%BA%90%E6%A0%87%E5%BF%97%E7%AC%A6

  開始教學 

首先我們先寫入 JavaScript,創一個 function (在 </body> 上方)。

function openClient(scheme_url, download_url, timeout = 600) {
    var startTime = Date.now();
    var ifr = document.createElement('iframe');

    ifr.src = scheme_url;
    ifr.style.display = 'none';
    document.body.appendChild(ifr);

    var t = setTimeout(function() {
        var endTime = Date.now();

        if (!startTime || endTime - startTime < timeout + 200) {
            //未安裝應用程式執行部分
            if (confirm("您未安裝 Line,要前往 Line 官網嗎?")) {
                window.open(download_url, "_blank");
            }
        }
    }, timeout);

    window.onblur = function() {
        clearTimeout(t);
        window.addEventListener("DOMContentLoaded", function() {
            document.body.removeChild(ifr);
        }, false);
    }
}

然後在想要新增應用程式啟動連結的程式碼加入 onclick="openClient('應用程式連結', '下載網址', '延遲,默認 600');",例如 <a href="javascript:;" onclick="openClient('line://', 'https://line.me/', '600');">啟動 Line</a>

解釋一下 openClient(),這是剛剛寫入的 function,參數有 scheme_urldownload_urltimeout,用法範例 openClient('line://', 'https://line.me/', '600');

這樣功能就完成了,是不是很簡單www

完整範例

<!doctype html>
<html>
    <head>
        <title>啟動 Line Demo</title>
    </head>
    <body>
        <a href="javascript:;" onclick="openClient('line://', 'https://line.me/', '600');">啟動 Line</a>

        <script>
        function openClient(scheme_url, download_url, timeout = 600) {
            var startTime = Date.now();
            var ifr = document.createElement('iframe');
        
            ifr.src = scheme_url;
            ifr.style.display = 'none';
            document.body.appendChild(ifr);

            var t = setTimeout(function() {
                var endTime = Date.now();

                if (!startTime || endTime - startTime < timeout + 200) {
                    //未安裝應用程式執行部分
                    if (confirm("您未安裝 Line,要前往 Line 官網嗎?")) {
                        window.open(download_url, "_blank");
                    }
                }
            }, timeout);

            window.onblur = function() {
                clearTimeout(t);
                window.addEventListener("DOMContentLoaded", function() {
                    document.body.removeChild(ifr);
                }, false);
            }
        }
        </script>
    </body>
</html>

GitHub
https://github.com/GoneTone/javascript-install-app-judgment-demo


【JavaScript】JS 判斷使用者是否安裝應用程式 App 並啟動 - QR Code
本站內容未經授權許可請勿擅自抄襲
如果需引用部分文章內容請註明來源網址

發表時間:2018-05-29 11:24:24
此文章網址:https://blog.reh.tw/archives/627
關於作者
張文相 Zhang Wenxiang 的頭像

張文相 Zhang Wenxiang

我是本站的站長,喜歡 Coding 的一位學生。

張文相 Zhang Wenxiang

我是本站的站長,喜歡 Coding 的一位學生。


分類:教學 程式
標籤:HTML JavaScript JS URL URL scheme URL 啟動 App 程式 網頁



Facebook 留言