更改选项卡时 JavaScript 在 iPad 上暂停 : is there a way to know when coming back?

标签 javascript ipad safari dom-events

我遇到了 iOS 5 pauses JavaScript when tab is not active 中描述的相同问题线程。

我的问题是,当我回到暂停的选项卡时是否会被注意到。

onfocusonblur 事件不适用于要暂停的选项卡。

代码:

<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 上运行。

最佳答案

两年前有人用this query提出了这个问题。 。不幸的是,只有几个答案,其中一个似乎是实现这一效果的唯一方法。在 Apple 可以在移动 Safari 中实现完整的页面可见性 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();
        }

    };

其余部分可以在 fiddle 中阅读。为了看到后备,您必须使用平板电脑(否则为什么您需要此功能而不使用平板电脑?)。

请注意,.onFocus 方法可以接受其第二个参数的参数数组,然后将其传递给您的事件处理程序。这意味着您的事件处理程序将始终有一个事件对象作为其第一个参数(如果不支持 API,则为 null),并将您的参数数组作为其第二个参数。

此外,该代码已经测试了几个小时,因此可能容易出现故障。在 Mobile Safari 正式投入使用之前,我将不胜感激任何建设性的批评,以使其具有生产值(value)。

关于更改选项卡时 JavaScript 在 iPad 上暂停 : is there a way to know when coming back?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12817295/

相关文章:

javascript - Dojo win.doc 未定义

javascript - CSS 动画中的非动画帧序列

ios - 在 Split View的弹出式 Controller 中以 UIModalPresentationFormSheet 样式呈现的对话框在旋转后消失

html - 显示 flex 与 Safari 问题

javascript - 在数组中缓存 jQuery 对象会提高速度吗?

iphone - 我的 UIView 动画不稳定 - 如何优化以下代码?

ios - 针对 iPad Pro 显示屏优化的网络图像分辨率

javascript - 如何在 IPAD safari 中播放 HTML 格式的 ogg 文件?

javascript - Safari 11-自动播放YouTube问题

JavaScript 正则表达式查找实例