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

4

13

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.

Harrington answered 3/8, 2012 at 12:35 Comment(2)
This event also fires when the device is locked. You can use pageshow which will fire when the device is unlocked and the page is shown again.Sandysandye
Did you try window.onblur? That might works.Marquet
L
1

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.
Lothians answered 1/7, 2013 at 11:47 Comment(0)
L
1

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.

Label answered 16/7, 2013 at 7:16 Comment(1)
I'm writing a html5 game, I'm pausing the game physics when a player goes away from the game, the blur and focus events aren't firing for me in safari on iOS 6.1.3 eg. $(window).on('blur',_pauseGame) when I switch tabs and return to ios homescreen, events works perfectly on desktop.Loot
H
1

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

Harrington answered 16/12, 2013 at 11:24 Comment(0)
M
1

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.

Maxma answered 29/9, 2021 at 19:17 Comment(0)

© 2022 - 2024 — McMap. All rights reserved.