Detect moving to a new tab in Mobile Safari

Question

I have a series of pages that open popups (new tabs in Mobile Safari.) Each of these popups needs to know when they are the focused or not. On desktops, we use window.onblur and window.onfocus to drive this behavior. However, none of these events work on iPad. I also tried window.onpageshow and window.onpagehide which don't seem to fire at the right times either. I have a test HTML file:

<html>
<head>
<script language="javascript">
console.log('Hello');
window.onblur = function(e) { console.log('blur'); };
window.onfocus = function(e) { console.log('focus'); };
window.onpagehide = function(e) { console.log('pagehide'); };
window.onpageshow = function(e) { console.log('pageshow'); };
</script>
</head>
<body>
<a href="http://www.google.com" target="_blank">Click Me</a>
</body>
</html>

In theory, when you click 'Click Me', you should get a blur event when the new window appears. But this doesn't happen on Mobile Safari. onpagehide and onpageshow show no love either, they only help for detecting when you're about to close the tab.

How can I get the behavior I'm looking for in Mobile Safari? Is it possible at all?

score 6 · Answer 1 · answered Jun 24 '12 at 17:39

6

Try this: https://gist.github.com/1122546

It's a Visibilty API polyfill. Should do the trick.

answered Jun 24 '12 at 17:39

Bruno

1,368
9
11

Thank you, that looks like just the ticket! – joshk0 Jun 25 '12 at 10:10
actually according to Chris Keele's comment, that may not work in Mobile Safari. I don't have my iPad on me right now - if what he says is true, is there a way around it for Mobile Safari? – joshk0 Jun 25 '12 at 10:12

score 4 · Answer 2 · answered Jun 22 '12 at 21:29

I don't think that onblur can be detected, but this is a code to detect onfocus:

var timestamp=new Date().getTime();
function checkResume()
{
    var current=new Date().getTime();
    if(current-timestamp>5000)
    {
        var event=document.createEvent("Events");
        event.initEvent("focus",true,true);
        document.dispatchEvent(event);
    }
    timestamp=current;
}
window.setInterval(checkResume,50);

Then you just write:

document.addEventListener("focus",function()
{
    alert("Focus detected");
},false);

score 2 · Answer 3 · edited May 23 '17 at 11:53

2

iOS 5 pause JS in none active tab. Maybe this topic could help you.

ios 5 pauses javascript when tab is not active

Handling standby on iPad using Javascript

edited May 23 '17 at 11:53

Community

1
1

answered Jun 21 '12 at 07:35

Yoann

4,937
1
29
47

score 0 · Answer 4 · edited May 23 '17 at 12:09

0

Someone asked the same thing a little more recently so I'll just link this answer to my older one here.

Mageek's method is very similar to what I'm doing, but will also fire on a scroll event or when the keyboard is visible. Preventing the behavior upon scrolling wasn't terribly challenging, but I never got around to looking up on-screen keyboard events.

My object also leverages requestAnimationFrame and will use the focus hack only as a fallback, opting to use the Visibility API where available (ideally making it future-proof).

edited May 23 '17 at 12:09

Community

1
1

answered Feb 04 '13 at 13:48

MyNameIsKo

2,171
1
15
24

this will only tell when you come back into the tab, right? I would like to know when the tab that has this code is no longer onscreen, and know it before the tab has been reopened. – Andrew Aug 24 '13 at 02:32

Detect moving to a new tab in Mobile Safari

4 Answers4

Linked