页面隐藏和页面显示事件在ios chrome上无法按预期工作 [英] pagehide and pageshow events don't work as expected on ios chrome

问题描述

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

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

1）按主页按钮，即发送铬到背景

2 ）切换选项卡

以下是一个小的JavaScript代码片段，您可以使用它来验证它：

 < script type =text / javascript> 
 window.addEventListener（pageshow，function（evt）{
 alert（'show'）; 
}，false）; 
 window.addEventListener（pagehide，function（evt）{
 alert（'hide'）; 
}，false）; 
< / script> 
  

我能做些什么来检测铬是否被发送到后台。一旦chrome返回到前台，我需要清除setTimeout计时器。任何解决方法？

解决方案

以下是工作代码：

 < script type =text / javascript> 
 var心跳; 
 var lastInterval; 
 
函数clearTimers（）{
 clearTimeout（heartbeat）; 
 
 
函数getTime（）{
 return（new Date（））。getTime（）; 
} 
 
 function intervalHeartbeat（）{
 var now = getTime（）; 
 var diff = now  -  lastInterval  -  200; 
 lastInterval = now; 
 if（diff> 1000）{//在小于1000ms的小口吃时触发
 clearTimers（）; 
} 
} 
 lastInterval = getTime（）; 
 heartbeat = setInterval（intervalHeartbeat，200）; 
  

您可以在此处找到更多详细信息： http：// aawaara。 com / post / 74543339755 /最小代码 - 这就是要改变世界

Apple documentation lists down the available iOS browser events here: https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariWebContent/HandlingEvents/HandlingEvents.html

the 'pagehide' and 'pageshow' events seem to work fine on safari, but on chrome it only works on page load and unload. It doesn't work on:

1) Pressing the home button, i.e. sending chrome to background

2) Switching tabs

Below is a small javascript snippet that you can use to verify it:

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

What can I do to detect whether chrome was sent to background or not. I need to clear a setTimeout timer as soon as chrome is brought back to foreground. Any workarounds?

解决方案

Below is the working code:

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

You can find more details here: http://aawaara.com/post/74543339755/smallest-piece-of-code-thats-going-to-change-the-world

这篇关于页面隐藏和页面显示事件在ios chrome上无法按预期工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！