如何检测浏览器未最小化且相关选项卡未处于活动状态

图西塔·维克拉玛辛格(Thuchitha Wickramasinghe)

在我的网站上有一个下载页面。我想在下载页面上让用户等待15秒钟。我想在下载按钮出现之前增加15秒的计时器。这意味着当用户单击浏览器中的另一个选项卡或最小化浏览器时,计时器应停止。

我的问题是如何检测用户是否一直在网页上观看,这意味着浏览器没有最小化并且该选项卡没有处于活动状态。如何在Windows中执行此任务javascript

Pierfrancesco

这里是一个现成的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);

    }
})();

希望这可以帮到你!:)

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

检测浏览器选项卡是否处于活动状态或用户已离开

如果浏览器选项卡处于活动状态,如何更改 Shopify 标题

检测用户是否切换选项卡或最小化浏览器窗口并分别处理它们

浏览器选项卡处于非活动状态时,如何在REACT应用程序中播放音频?

浏览器选项卡的活动如何影响查询

PageVisibility API - 在浏览器控制台选项卡中更改为活动状态

Javascript:如何知道哪个选项卡处于活动状态

如何“分配”选项卡使其处于活动状态?

Jmeter:“活动浏览器”选项卡

Angular 7检测浏览器选项卡被激活

检测 Bokeh 中的浏览器选项卡关闭

Android:如何查找选项卡布局中哪个选项卡处于活动状态?

如果刷新或关闭或新选项卡,如何检测浏览器

当应用程序处于最小化状态时如何从边缘浏览器共享到UWP应用程序C#uwp

如何在所有浏览器会话(选项卡)中重置Redux状态

如何使用浏览器刷新中的选项卡维护页面状态

如何使特定的选项卡在Angular Material选项卡组件上处于活动状态

如何实现何时复制浏览器选项卡

GWT:如何更改浏览器选项卡名称?

如何从“浏览器”选项卡获取标题?

ui.bootstrap.tabs如何知道angularjs控制器中哪个选项卡处于活动状态

如何在颤动中更改处于选中和未选中状态的选项卡图标的颜色?

我如何从Origin选项卡获取新打开的浏览器选项卡名称?

检测浏览器窗口是否处于活动状态,并在窗口再次处于活动状态后启动事件[JavaScript]

如何使单击的选项卡及其内容处于活动状态而其他内容处于非活动状态?

检查浏览器选项卡是否在ReactJS中处于焦点

浏览器中的多个打开的选项卡是否消耗了VRAM,即使它们当前未显示?

当Bootstrap 4中的选项卡处于活动状态时,如何将其添加到选项卡?

ConEnu:如何将一个选项卡设置为在多个选项卡中处于活动状态?