javascript - how to detect moving to a new tab in Mobile Safari -
i know how equivalent of $(window).blur
event in mobile safari on ios 7. purpose of detecting when tab no longer onscreen. has been asked few times before (detect moving new tab in mobile safari), however, answers either no longer work, or give $(window).focus
event, rather $(window).blur
event. also, $(window).blur
fire on closing of safari?
per article: http://www.mobilexweb.com/blog/safari-ios7-html5-problems-apis-review
page visibility api -webkit-prefixed on ios 7- detect when our tab goes foreground , background. xmlhttprequest 2.0 spec compatible means can request ‘blob’ response. video tracks api covered , allow query , navigate through tracks , contents on media element.
the relevant code implement basic demo looks this; can adapt suit requirements. it's great example because not show how capture state change, shows how request data during visibilitychanged
event:
var eventname = "visibilitychange"; if (document.webkithidden != undefined) { eventname = "webkitvisibilitychange"; document.write("<h2>webkit prefix detected</h2>"); } else if (document.mozhidden != undefined) { eventname = "mozvisibilitychange"; document.write("<h2>moz prefix detected</h2>"); } else if (document.mshidden != undefined) { eventname = "msvisibilitychange"; document.write("<h2>ms prefix detected</h2>"); } else if (document.hidden != undefined) { document.write("<h2>standard api detected</h2>"); } else { document.write("<h2>api not available</h2>"); } function visibilitychanged() { var h4 = document.getelementsbytagname("h4")[0]; if (document.hidden || document.mozhidden || document.mshidden || document.webkithidden) { h4.innerhtml += "<br>hidden @ " + date().tostring(); var ajax = new xmlhttprequest(); ajax.open("get", "sleep.php?" + math.random(), true); ajax.onreadystatechange = function () { if (ajax.status == 200 && ajax.readystate == 4) { h4.innerhtml += "<br>ajax async @ " + date().tostring(); } } ajax.send(null); var ajaxs = new xmlhttprequest(); ajax.open("get", "sleep.php?" + math.random(), false); ajax.send(null); h4.innerhtml += "<br>ajax sync @ " + date().tostring(); settimeout(function () { h4.innerhtml += "<br>timer @ " + date().tostring(); }, 3000); } else { h4.innerhtml += "<br>shown @ " + date().tostring(); } } document.addeventlistener(eventname, visibilitychanged, false); window.onpageshow = function () { h4.innerhtml = "<br>page show @ " + date().tostring(); }; window.onpagehide = function () { h4.innerhtml = "<br>page hide @ " + date().tostring(); };
and if want test out on device, here's live demo: http://mobilexweb.com/ts/api/page.html
you'll see log write page when tab loses , regains focus.
Comments
Post a Comment