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="" 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?
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." 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?
Share Improve this question edited Jun 21, 2012 at 7:19 user207616 asked Jun 18, 2012 at 14:53 joshk0joshk0 2,6142 gold badges26 silver badges36 bronze badges4 Answers
Reset to default 6 +50Try this: https://gist.github./1122546
It's a Visibilty API polyfill. Should do the trick.
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);
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
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).