javascript - 如何检测浏览器未最小化且相关选项卡未处于非事件状态

Question

关闭。此题需要 details or clarity 。目前不接受答案。

---

想要改进这个问题吗？通过 editing this post 添加详细信息并澄清问题.

已关闭 7 年前。

Improve this question

在我的网站上，有一个下载页面。我想让我的用户在下载页面等待 15 秒。我想在下载按钮出现之前添加 15 秒计时器。同时，如果用户单击浏览器中的另一个选项卡或最小化浏览器，计时器应该停止。

我的问题是如何检测用户正在网页上持续观看，这意味着浏览器没有最小化并且此选项卡不是处于非事件状态。如何在 javascript 中完成此任务.

Answer 1

这里有一个现成的js

(function() {
    var hidden, visibilityChange;
    if (typeof document.hidden !== "undefined") { 
        hidden = "hidden";
        visibilityChange = "visibilitychange";
    } else if (typeof document.mozHidden !== "undefined") {
        hidden = "mozHidden";
        visibilityChange = "mozvisibilitychange";
    } else if (typeof document.msHidden !== "undefined") {
        hidden = "msHidden";
        visibilityChange = "msvisibilitychange";
    } else if (typeof document.webkitHidden !== "undefined") {
        hidden = "webkitHidden";
        visibilityChange = "webkitvisibilitychange";
    }


    // If the page is hidden, pause the countdown;
    // if the page is shown, resume the countdown
    function handleVisibilityChange() {
        if (document[hidden]) {

            //pause your countdown
        } else {

            //resume your countdown
        }
    }

    // Warn if the browser doesn't support addEventListener or the Page Visibility API
    if (typeof document.addEventListener === "undefined" ||
        typeof document[hidden] === "undefined") {} else {
        // Handle page visibility change   
        document.addEventListener(visibilityChange, handleVisibilityChange, false);

    }
})();

希望这可以帮助你! :)