问题标签 [visibilitychange]

我正在使用visibilitychange浏览器的事件。一切看起来都不错。

单击我的一个按钮后，我fullScreen API习惯将网站带入全屏模式。

我遇到的问题是visibilitychange进入fullscreen模式时事件被调用两次，当我退出全屏模式时，visibilitychange被调用 4 次。发生这种情况有什么原因吗？有没有办法让它只被调用一次？

当用作带有事件的可观察对象的管道时，运算符document.visibilityState返回的值与预期不同。mapTo()document.visibilitychange

笔示例：https ://codepen.io/nametoforget/pen/ZEQmdBj

请参阅控制台登录笔。

我试图使用 Visibility API，但它不适用于孩子。重现的最小示例：

之后，父窗口仍然打印“可见”-“隐藏”，但子窗口仅在刷新时打印“隐藏”一次。

它在最新的 Opera 浏览器中运行良好，但在 Chrome 中却不行

老实说，当我来到这个最小的复制时，我被卡住了，不知道在哪里挖掘。有什么想法可能是错的吗？

当页面隐藏时，Chrome 永远不会触发滚动事件，尽管页面实际上正在滚动。这看起来像是他们为减少不可见页面的 CPU 和网络使用而实施的。

有没有办法解决这种行为，即使使用 Chrome 的标志或扩展程序？我需要触发“滚动”事件，因为这是我正在测试的。

在浏览器选项卡之间切换时如何防止 SMIL 动画暂停？

我有 SVG 时钟，它使用<animatetransform>. 当您切换到另一个选项卡时，动画会冻结并且没有赶上它应该在的位置。我希望此动画在页面不可见时平稳运行，或者在页面再次可见时暂停并赶上。我可以把它转换成 CSS 动画，没关系。

这是秒针的简化代码：

HTML：

JS：

我知道如何使用Page Visibility API来暂停事情，但如何阻止他们这样做对我来说是不可理解的。

TL;DR：我正在开发一个 Chrome 扩展程序，只有当一个选项卡可见且未被另一个窗口覆盖时，我才需要增加计数。有没有办法检测到这一点？

我尝试过使用Page Visibility API，但它的问题是：

想象一下，我有两个并排停靠的窗户。我的重点是窗口“A”中的选项卡“X”。但是，在旁边，我还在窗口“B”的前景中打开了选项卡“Y”。

如果我document.hidden当时检查选项卡“Y”，它将解析为false，这就是我想要的。但是，如果我随后扩展窗口“A”以覆盖全屏并让窗口“B”在其后面打开而不是最小化，则document.hidden选项卡“Y”仍然相等false，即使从用户视觉的角度来看，该选项卡完全无形的。

将事件侦听器添加到blurandfocus事件也无济于事，因为blur只要添加到的文档失去焦点就会触发，这适用于我的窗口“A”覆盖整个屏幕的情况，但不适合我有窗口'A'和'B'并排的场景。在这种情况下，当标签“Y”失去焦点时，“模糊”事件将被触发，即使标签“Y”在技术上对任何正在查看屏幕的人都是可见的。

我需要的结果如下所示：

1. 选项卡“Y”位于非最小化窗口的前景并且未被另一个窗口覆盖： increaseCount() // regardless of whether the tab is focused or not
2. 选项卡“Y”位于非最小化窗口的前景但被另一个窗口覆盖，因此任何人类观察者都看不到其内容： // don't increase count

有没有办法检测到这一点？

当用户关闭或离开特定页面时，我需要发回一些数据以进行报告。因此，我设置了一个 API 端点并使用 window.fetch 并设置了 keepalive 标志，以确保即使页面完全卸载，调用也会完成。

有问题的 Javascript 调用如下所示：

我通过观察 pagevisibility 事件来调用它，并在页面被隐藏或终止时调用它，使用页面生命周期库。

首选行为是完成调用，即使重新加载页面或单击另一个链接也是如此。但是由于这个 CORS 错误，它没有发生。它在 Chrome 和 Firefox 中运行良好，但在 Safari 中失败并在控制台中显示以下错误消息：

由于访问控制检查，Fetch API 无法加载（api 端点）。

如果在任何其他情况下调用相同的 fetch 调用（例如，单击链接或最小化然后最大化页面），则在 Safari 中也可以使用相同的 fetch 调用，因此在页面卸载时调用它是特定的。

Reflex.DOM不visibilitychange公开document. 它不能，因为据我了解 reflex 不会暴露document，这是低级 DOM 交互的一部分，JSDOM因此也是低级 DOM 交互的一部分。

无论如何，我将不得不依赖这样的东西：

visibilitychange暴露在GHCJS.DOM.Document

https://hackage.haskell.org/package/ghcjs-dom-0.9.4.0/docs/GHCJS-DOM-Document.html

使用 type visibilitychange :: EventName Document Event，但在 JSDOM 命名空间中。

编辑：为什么我需要 visibilitychange 事件？每次可见性更改触发并更改为“隐藏”时，我都希望将我的应用程序的状态保留在本地存储中。

似乎总是在事件侦听器回调document.hasFocus()的上下文中返回 false 。visibilitychange我知道我可以使用document.hidden，但我更喜欢使用hasFocus()，因为当它是真的时它会更窄一些。

我更想知道为什么会这样。是不是因为每次visibilitychange被调用时document.hasFocus()实际上都不是真的，因为document必须聚焦但在被调用之前不会发生这种情况visibilitychange？

示例1，我们从tabA切换到tabB ->document.hasFocus()设置为false然后visibilitychange运行。示例 2，我们从 tabB 切换回 tabA ->visibilitychange运行，document.hasFocus()仍然是 false，因为我们在技术上没有专注于文档，因此它返回 false？只有当我们鼠标点击进入文档时才会document.hasFocus()成立？

我需要检测 Safari 浏览器（PC）中的特定选项卡是否处于活动状态，因此我使用了 visibilitychange 事件。此方法适用于除一种情况外的所有情况。通过“显示选项卡概览”更改选项卡时，不会触发可见性更改事件。在这种情况下，如何检测到选项卡已更改？

“显示选项卡概览”按钮是指浏览器的右上角图标。