how to detect moving to a new tab in Mobile Safari

Question

I would like to know how to get the equivalent of a $(window).blur event in mobile safari on iOS 7. I would like this for the purpose of detecting when a tab is no longer onscreen. This has been asked a few times before (Detect moving to a new tab in Mobile Safari), however, all the answers either no longer work, or only give a $(window).focus event, rather than a $(window).blur event. Also, will $(window).blur fire on closing of safari?

[This is a good page for learning more about focusin/focusout and blur events.](http://www.quirksmode.org/dom/events/blurfocus.html) <-- click link! — Mike, Dec 20 '13 at 21:12
[This is another good page](http://output.jsbin.com/rinece) for viewing what events occur. Different events occur on different browsers/versions/OSes/UIWebView. — robocat, Feb 05 '16 at 02:55

score 3 · Accepted Answer · answered Dec 20 '13 at 20:47

Per this article: http://www.mobilexweb.com/blog/safari-ios7-html5-problems-apis-review

Page Visibility is the API -webkit-prefixed on iOS 7- to detect when our tab goes foreground and background. XMLHttpRequest 2.0 spec fully compatible means that now we can request ‘blob’ as a response. The Video tracks API was already covered quickly and it allow us to query and navigate through all the tracks and contents on any media element.

The relevant code to implement their basic demo looks like this; hopefully you can adapt it to suit your requirements. It's a great example because not only does it show you how to capture the state change, but it also shows how to request data during the 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 at " + 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 at " + 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 at " + Date().toString();

        setTimeout(function () {
            h4.innerHTML += "<br>Timer at " + Date().toString();
        }, 3000);

    } else {
        h4.innerHTML += "<br>Shown at " + Date().toString();
    }
}
document.addEventListener(eventName, visibilityChanged, false);

window.onpageshow = function () {
    h4.innerHTML = "<br>Page show at " + Date().toString();
};

window.onpagehide = function () {
    h4.innerHTML = "<br>Page hide at " + Date().toString();
};

And if you want to test it out on your device, here's the live demo: http://mobilexweb.com/ts/api/page.html

You'll see a log write to the page when the tab loses and regains focus.

Looks like this will work for me! Thanks! (Bounty will be awarded in 3 hours because of SO's time limitation) — Andrew, Dec 21 '13 at 00:54
Sure thing! No worries. I encountered that a while back myself, it was a struggle, then found that article. — brandonscript, Dec 21 '13 at 01:14

how to detect moving to a new tab in Mobile Safari

1 Answers1