pagehide 和 pageshow 事件在 ios chrome 上无法正常工作

Question

Apple 文档在此处列出了可用的 iOS 浏览器事件： https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariWebContent/HandlingEvents/HandlingEvents.html

“pagehide”和“pageshow”事件似乎在 safari 上运行良好，但在 chrome 上它只适用于页面加载和卸载。它不起作用：

1. 按下主页按钮，即将 Chrome 发送到后台

2. 切换标签

下面是一个小的 Javascript sn-p，你可以用它来验证它：

<script type="text/javascript">
        window.addEventListener("pageshow", function(evt){
            alert('show');
        }, false);
        window.addEventListener("pagehide", function(evt){
            alert('hide');
        }, false);
</script>

我可以做些什么来检测 chrome 是否被发送到后台。一旦 chrome 回到前台，我需要清除一个 setTimeout 计时器。有什么解决方法吗？

Answer 1

Pagehide 和 pageshow 不是您想要完成的事情所需要的事件。

相反，将visibilitychange 事件与document.hidden 或document.visibilitystate 结合使用，这应该完全符合您的要求。

这仅适用于受支持的浏览器 - 迄今为止包括 Chrome，但不包括 Safari（目前）。所以为了安全起见，我会在visibilitychange 上调用clearTimers()，并且只有在没有定义document.visibilitystate 时才回退到在pagehide 上调用它。

见：

MDN: visibilitychange event

MDN: Using the Page Visibility API

Page Visibility - W3C recommendation, October 2013

Answer 2

下面是工作代码：

<script type="text/javascript">
        var heartbeat;
        var lastInterval;

        function clearTimers() {
            clearTimeout(heartbeat);
        }

        function getTime() {
            return (new Date()).getTime();
        }

        function intervalHeartbeat() {
            var now = getTime();
            var diff = now - lastInterval - 200;
            lastInterval = now;
            if(diff > 1000) { // don't trigger on small stutters less than 1000ms
                clearTimers();
            }
        }
        lastInterval = getTime();
        heartbeat = setInterval(intervalHeartbeat, 200);

您可以在此处找到更多详细信息：http://aawaara.com/post/74543339755/smallest-piece-of-code-thats-going-to-change-the-world