2

我想知道如何$(window).blur在 iOS 7 上获得相当于移动 Safari 中的事件。我希望这样做是为了检测选项卡何时不再出现在屏幕上。这已经被问过几次（检测移动到 Mobile Safari 中的新选项卡），但是，所有的答案要么不再有效，要么只给出一个$(window).focus事件，而不是一个$(window).blur事件。另外，$(window).blur野生动物园关闭时会开火吗？

4

1 回答 1

3

根据这篇文章：http ://www.mobilexweb.com/blog/safari-ios7-html5-problems-apis-review

Page Visibility 是 iOS 7 上以 webkit 为前缀的 API，用于检测我们的选项卡何时进入前台和后台。XMLHttpRequest 2.0 规范完全兼容意味着现在我们可以请求“blob”作为响应。视频轨道 API 已经被快速覆盖，它允许我们查询和浏览任何媒体元素上的所有轨道和内容。

实现其基本演示的相关代码如下所示；希望您可以对其进行调整以适应您的要求。这是一个很好的例子，因为它不仅向您展示了如何捕获状态变化，而且还展示了如何在visibilityChanged事件期间请求数据：

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();
};

如果你想在你的设备上测试它，这里是现场演示：http: //mobilexweb.com/ts/api/page.html

当标签丢失并恢复焦点时，您会看到将日志写入页面。

于 2013-12-20T20:47:34.613 回答