Question

我想知道如何在iOS 7上的移动版Safari中获得相当于$(window).blur的事件。我希望这样做是为了检测标签何时不在屏幕上。之前已经询问了几次（Detect moving to a new tab in Mobile Safari），但是，所有答案都不再有效，或只提供$(window).focus事件，而不是$(window).blur事件。此外，$(window).blur会在关闭野生动物园时触发吗？

Answer 1

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

页面可见性是iOS-7上的API -webkit前缀，用于检测我们的选项卡何时进入前景和后台。 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

当标签丢失并重新获得焦点时，您会看到对页面的日志写入。

如何检测移动到Mobile Safari中的新选项卡

1 个答案: