Geek Answers Handbook

Detecting transition to a new tab in Mobile Safari

I have a series of pages that open pop-ups (new tabs in Mobile Safari.) Each of these pop-ups should know when they are concentrated or not. On desktop computers, we use window.onblur and window.onfocus to control this behavior. However, none of these events work on the iPad. I also tried window.onpageshow and window.onpagehide , which also don't work at the right time. 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 a new window appears. But this does not happen on Mobile Safari. onpagehide and onpageshow also do not show love, they only help to detect when you are going to close the tab.

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

+7
source share
4 answers

Try the following: https://gist.github.com/1122546

This is the Visibilty polyfill API. Gotta do the trick.

+5
source

I do not think that onblur can be detected, but this is the code for detecting 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);
+4
source

iOS 5 pause JS without an active tab. Perhaps this topic may help you.

ios 5 pauses javascript if tab is inactive

Handling iPad Standby with Javascript

+2
source

Someone asked about this recently, so I’ll just associate this answer with my old one here .

The Mageek method is very similar to what I am doing, but it also fires a scroll event or when the keyboard is visible. Preventing scroll behavior was not terribly difficult, but I could never look for events on the screen.

My object also uses requestAnimationFrame and will only use focus hacking as a backup, preferring to use the visibility API where possible (ideally makes it reliable for the future).

0
source

More articles:


All Articles