JS：在其他域的iframe中检测是否可见

Question

我有一个问题，想知道放置在HTML文档中的iframe是否可见（超过折叠）。

我的网页： https : //oneserver.com/index.html

<html>
<head>
</head>
<body>
<iframe src="https://otherserver.com/index.html></iframe>
</body>
</html>

另一个网页（不是在父iframe可见时应该做的事情：

<html>
<head></head
<body>
<script>
if(document.isVisible()){document.style.background="red"}
</script>
</body>
</html>

我尝试使用Page Visibility API和一个jquery技巧，但是到目前为止，我没有找到任何解决方案。 您能在这件事上帮助我吗？

非常感谢！

Answer 1

为了确定它是否可见，它必须能够检测父窗口的大小以及该窗口滚动了多远。

标准的跨域安全性使得无法从框架内部实现这一点。

最好的办法是让父页面中的代码检测框架何时进入或离开视图，然后使用postMessage API将该事件告知框架中的页面。