【发布时间】:2021-03-01 08:23:57
【问题描述】:
TL;DR:我正在开发一个 Chrome 扩展程序,仅当标签可见且未被另一个窗口覆盖时,我才需要增加计数。有什么方法可以检测到这一点吗?
我尝试过使用Page Visibility API,但问题是:
假设我有两个并排停靠的窗口。我的重点是窗口“A”中的选项卡“X”。但是,在旁边,我还在窗口“B”的前景中打开了选项卡“Y”。
如果我当时检查document.hidden 的选项卡“Y”,它将解析为false,这就是我想要的。但是,如果我随后展开窗口“A”以覆盖全屏并让窗口“B”在其后面打开而不是最小化,则标签“Y”的document.hidden 仍将等于false,即使从用户的角度来看透视,该选项卡是完全不可见的。
向blur 和focus 事件添加事件侦听器也无济于事,因为每当添加到它的文档失去焦点时就会触发blur,这对于我有窗口“A”的情况来说很好用覆盖整个屏幕,但不适合我将窗口“A”和“B”并排的场景。在这种情况下,当标签“Y”失去焦点时会触发“模糊”事件,即使在技术上任何正在查看屏幕的人都可以看到标签“Y”。
我需要的结果是这样的:
- 选项卡“Y”位于非最小化窗口的前景并且未被另一个窗口覆盖:
increaseCount() // regardless of whether the tab is focused or not - 选项卡“Y”位于非最小化窗口的前景,但被另一个窗口覆盖,因此任何人类观察者都看不到其内容:
// don't increase count
有什么方法可以检测到这个吗?
【问题讨论】:
-
IntersectionObserver v2 从 Chrome 74 开始通过
isVisible属性说明这一点。 -
感谢@wOxxOm 的指点。我已经阅读了 API 文档并自己进行了一些实验,但不幸的是,IntersectionObserver v2 似乎无法检测到这一点。观察者只能检测目标元素何时在容器根元素中可见。它无法检测到选项卡本身或其任何元素何时被另一个窗口的选项卡覆盖。
-
那么您必须将自己的低级实现编写为单独的实用程序,并通过nativeMessaging 启动它。
-
就可以了,谢谢@wOxxOm!
标签: javascript html google-chrome-extension visibility visibilitychange