CODEWITHSUNDEEP
javascriptiosmobile-safaridom-events
Semmel
Semmel

Reputation: 1070

Pagehide event on imminent tab switching in Mobile Safari does not fire when running on iPad

It is well know that Mobile Safari pauses Javascript execution on a webpage when

  1. you switch to different browser tab
  2. switch to a different iOS app (e.g. when you get an incoming call the phone app)

You can subscribe to the window's "pagehide" and "pageshow" events to detect imminent suspension and reactivation of Javascript.

The problem is, those events do not fire when tab-switching (1.) on an iPad Mobile Safari. On an iPhone Mobile Safari everything is fine, just as described above.

It's trivial to demonstrate:

<!DOCTYPE html>
<html>
<head>
    <script>
        window.addEventListener("pagehide", function(evt){
            var logger = document.getElementById('log_id');
            logger.innerText = logger.innerText + " pagehide fired!";
        }, false);
    </script>
</head>
<body>
<div id="log_id"></div>
</body>
</html>

It fires on iPads (iOS5 and iOS6 Preview3) only when doing app-switching (2.) and not on tab-switching (1.). All iPhones work fine..

Has anyone been able to detect an imminent tab-switching on the iPad browser?

The reactivation of Javascript when the tab becomes active again can be detected by a heart beat loop as described in this discussion of the same topic.

Upvotes: 13

Views: 8224

Answers (4)

Vivek Gani
Vivek Gani

Reputation: 1313

Following from Sebastian's answer, these days (comparing 2013 to 2021) page visibility works reasonably well: see https://www.w3.org/TR/page-visibility/#example-1-visibility-aware-video-playback for more around subscribing to 'visibilitychange' for hidden/visible states.

This seems to be more useful than focus/blur these days as it covers visible-but-not-selected windows if concerned also about multi-window operating systems.

Upvotes: 1

Semmel
Semmel

Reputation: 1070

Fixed by Apple in iOS7. (Just tried in the iPad Simulator)

Upvotes: 1

Sebastian G. Marinescu
Sebastian G. Marinescu

Reputation: 2394

I agree with Pinal: Use focus/blur! But i suggest not on document, but rather on window. Just register a listener to them and do your stuff in there.

As http://caniuse.com/#feat=pagevisibility states, the feature you want to use is not well implemented. (Edit: Just tested it in a mini test-case - it works on iOS 5/6 - even though caniuse.com asserts different)

If you try to use a timer, you could try requestAnimationFrame as an alternative to setInterval.

Upvotes: 1

Alex
Alex

Reputation: 11245

Try to check focus and blur on document.

Why you need Page Visibility API?

  1. You can use storage event to say other pages, who is active.
  2. You can use timers (setInterval) to check time from last timer fire. And if its more bigger than expected - page was hidden, because most browsers stop timer then page is hidden.

Upvotes: 1

Related Questions