我想知道如何在 iOS 7 上的移动 safari 中获得相当于 $(window).blur
事件的功能。我希望这样做是为了检测选项卡何时不存在屏幕上的时间更长。之前已经问过几次了( Detect moving to a new tab in Mobile Safari ),但是,所有答案要么不再起作用,要么只给出 $(window).focus
事件,而不是 $ (window).blur
事件。另外,$(window).blur
会在 safari 关闭时触发吗?
最佳答案
根据这篇文章: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.
实现其基本演示的相关代码如下所示;希望您可以对其进行调整以满足您的要求。这是一个很好的示例,因为它不仅向您展示了如何捕获状态更改,还展示了如何在 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
当选项卡失去并重新获得焦点时,您将看到写入页面的日志。
关于javascript - 如何检测移动到 Mobile Safari 中的新选项卡,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18414388/