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

本篇文章將教導如何利用 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);

}

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_url、download_url 和 timeout，用法範例 openClient('line://', 'https://line.me/', '600');。

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

完整範例

<!doctype html>

<html>

<head>

</head>

<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);

}

</script>

</body>

</html>

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

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