CODEWITHSUNDEEP
javascriptjqueryiosios7mobile-safari
Andrew
Andrew

Reputation: 15377

how to detect moving to a new tab in Mobile Safari

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?

Upvotes: 2

Views: 2555

Answers (1)

brandonscript
brandonscript

Reputation: 72975

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.

Upvotes: 3

Related Questions