我在iOS 5 pauses JavaScript when tab is not active线程中遇到了同样的问题。
我的问题是,回到暂停的标签页后是否可以看到我。
[onfocus
和onblur
事件在要暂停的标签上不起作用。
代码:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="http://code.jquery.com/jquery-1.7.1.min.js" ></script>
<script type="text/javascript">
window.onblur = function () {
console.log("blur");
$("#whatevent").append("blur<br/>");
}
window.onfocus = function () {
console.log("focus");
$("#whatevent").append("focus<br/>");
}
window.onunload = function () {
console.log("unload");
$("#whatevent").append("unload<br/>");
}
window.onload = function () {
console.log("load");
$("#whatevent").append("load<br/>");
}
</script>
</head>
<body>
<div id="whatevent"></div>
</body>
</html>
但只有onload
(但只有第一次加载页面时才发生)事件在iPad上切换标签时在iPad上起作用。
[有人在两年前以this query提出了这个问题。不幸的是,它只得到了两个答案,其中一个似乎是实现此效果的唯一方法。在Apple可以在移动浏览器中实现完整的Page Visibility API之前,我只能使用我创建的这个自定义对象,该自定义对象将使用该API,并在无法使用时回退。但是,据我所知,没有很好的方法来检查即将到来的选项卡开关。
Here's a basic fiddle表示其唯一的真实方法。实际上,它只接受焦点事件的处理函数,只要浏览器返回源选项卡,该事件就会触发。后备系统最多是hacky,不仅会在重新输入页面时触发,还会在脚本停止时间超过计时器阈值时触发。当键盘可见,滚动或正在运行的脚本阻止requestAnimationFrame触发时,都可能发生这种情况。由于滚动是最常见的行为,所以我添加了一个处理程序,该处理程序将重置上次保存的时间,以便避免触发焦点事件。这是脚本的主要部分,其中包括如上所述的“ hacky”方法:
_that.onFocus = function(handler, params) {
var hiddenProp = getHiddenProp();
console.log("Hidden prop: " + hiddenProp);
if (hiddenProp) {
var evtName = hiddenProp.replace(/[H|h]idden/, "") + "visibilitychange";
document.addEventListener(evtName, function(e) {
if (isHidden()) {
handler(e, params);
}
}, false);
}else {
var handlerObj = {"handler": handler};
if (params !== undefined) {handlerObj.params = params}
_handlers.push(handlerObj);
startLoop();
}
};
其余部分可以在小提琴中阅读。要查看后备广告,您必须使用平板电脑(为什么没有平板电脑您还需要此功能?)。请注意,.onFocus方法可以为其第二个参数接受一个参数数组,然后将其传递给事件处理程序。这意味着您的事件处理程序将始终为其第一个参数拥有一个事件对象(如果不支持API,则为null),并将参数数组作为第二个参数。
而且该代码还没有经过两个小时的测试,因此可能会出现故障。我将不胜感激任何建设性的批评,以使其在Mobile Safari发挥作用之前值得生产。