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

Popular posts from this blog

java - Run a .jar on Heroku -

java - Jtable duplicate Rows -

validation - How to pass paramaters like unix into windows batch file -