Apple documentation lists down the available iOS browser events here: .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?

Apple documentation lists down the available iOS browser events here: https://developer.apple./library/archive/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?

• javascript
• ios
• google-chrome
• dom-events

• I don't think you understand what 'pageshow' and 'pagehide' are meant to be for. They happen (a) on load/unload, and (b) on changing whether the page is the current page in the browser's history cache (i.e. when you navigate away or back to the page). They have NOTHING TO DO with whether the browser window is VISIBLE. They aren't meant to fire in your cases (1) and (2). – Doin Commented Sep 28, 2014 at 7:44
• @Doin even if I take your word for it (though a link to documentation will help), why is the behaviour different than Safari? Safari fires those events in the scenarios I described. At least one of them is buggy. – amit_saxena Commented Sep 28, 2014 at 8:22
• Perhaps minimizing Safari under iOS actually puts the page in the history cache and closes it (like navigating away would) to save CPU and/or RAM)? Anyway, some references: html.spec.whatwg/multipage/indices.html#event-pagehide developer.mozilla/en-US/docs/Web/Events/pagehide inkling./read/javascript-definitive-guide-david-flanagan-6th/… ; ...and the apple link you provided clearly states that pagehide/show are preferred replacements for the (nonvisual) unload/load events. – Doin Commented Sep 28, 2014 at 12:30
• This page describes in detail the rationale behind the pageshow/hide events: developer.mozilla/en-US/docs/Using_Firefox_1.5_caching – Doin Commented Sep 28, 2014 at 12:35
• At least one of those browsers is showing incorrect (inconsistent w.r.t web development) behavior, and therefore requires special handling. – amit_saxena Commented Sep 30, 2014 at 11:25

2 Answers 2

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./post/74543339755/smallest-piece-of-code-thats-going-to-change-the-world

Pagehide and pageshow aren't the events you need for what you're trying to acplish.

Instead, use the visibilitychange event in bination with document.hidden or document.visibilitystate, which should do exactly what you want.

This'll only work on supported browsers - which to date includes Chrome, but not Safari (yet). So to be safe, I'd call clearTimers() on visibilitychange, and fall back to calling it on pagehide only if document.visibilitystate is not defined.

See:

MDN: visibilitychange event

MDN: Using the Page Visibility API

Page Visibility - W3C remendation, October 2013