【发布时间】：2022-02-03 23:33:30
【问题描述】：
我开发了一个小部件，预计将作为 iFrame 在合作伙伴的网站上运行。 iFrame 是通过与父域不同的域提供的，因此我无法显式访问它们的 DOM。
最终用户可以使用父页面上的按钮展开/折叠我们的小部件。发生这种情况时，父页面不会提醒我们，也不会为我们提供任何告知当前状态的方法。
因此，我希望通过在 iFrame 中检测文档是否隐藏来解决此问题。如果我们的小部件被隐藏，我们会使用这些信息来确定是否需要向最终用户发送通知。
我已经尝试了一些事情，比如钩入visibilitychange 事件，但它不会触发。我也尝试过做一个 hacky 的事情，比如获取 document.body 的计算样式，但它似乎并没有根据 iFrame 是否隐藏而改变。
【问题讨论】：
-
Intersection Observer 是一个 api，它应该告诉你元素是否可见。如果你把身体钩在它上面，那就可以了。除此之外，您只能在同源帧中进行操作。
-
好吧，如果你可以在他们的页面上运行一个脚本，那是可能的，如果没有，你就不走运了。
-
感谢 Akxe 的创意！我试了一下，但由于某种原因，它只开了一次。然而，通读文档帮助我意识到
getBoundingClientRect()和检查if(height === 0)可以满足我的需要。 -
@Akxe - Intersection Observer 是一个很好的解决方案（到目前为止唯一一个对我有用的解决方案），您能否提交一个答案，其中包含指向 MDN 文档的链接以及关于它的简单解释有吗？
标签： javascript html iframe