有没有办法确定 iframe 是否可见/活动答案

【问题标题】：Is there a way to determine if an iframe is visible/active有没有办法确定 iframe 是否可见/活动
【发布时间】：2012-11-12 20:27:47
【问题描述】：

我有一个在站点上运行的 iframe（具有不同的域）。我能否在 iframe 中知道它对用户是否可行，或者该 iframe “居住”的页面是否处于活动状态。谢谢。

【问题讨论】：

您可以检查 iframe 是否可点击。例如，如果该像素不可见，document.elementFromPoint(0,0) 将返回 null。虽然如果 iframe 仅从屏幕上滚动，它也会返回 null...
这听起来像是一个很好的方向，但是 document.elementFromPoint(0,0) 在我检查的所有场景中都会返回标记（iframe 被划掉，页面不是；t重点，..），你能更具体一点吗？
我在 IE9、FF、Chrome 和 Opera 中进行了快速测试，并且仅在框架页面中触发 window.onload 时使用了 display: none/block。 IE 和 Chrome 完全符合我的预期 (null/HTMLElement)。 FF 在none 时出错，只有Opera 总是返回HTMLElement。不幸的是，我只能在本地测试跨域。我没有测试滚动，这是基于我之前对elementFromPoint() 的经验的猜测。请注意，此检查应在iframe 中完成，而不是在任何主页中。
看来我浪费了你的时间，抱歉。这实际上只在 IE 中可靠。其他浏览器似乎可以找到该元素，即使它不在屏幕上，也可以在设置visibility:hidden 时找到。而 Opera，它总能找到元素 :(。在 developer.mozilla.org/en-US/docs/DOM/document.elementFromPoint 中描述了与 IE 相同的行为，但显然这不是真的。

标签： javascript iframe cross-domain

【解决方案1】：

这实际上是不可能的，因为如果您在不同的域/端口/方案上，您将无法从框架本身访问嵌入框架的主页。

如果您的 iframe 在同一个域 && 端口 && 方案上，您可以这样做：

<html>
<body>
    <iframe src="frame.htm" id="myframe" style="display:block"></iframe>
</body>
</html>

还有frame.htm：

<script>
    var is_hidden = parent.document.getElementById("myframe").style.display == "none";
    alert(is_hidden ? "I am hidden" : "I am visible");
</script>

更新忽略了“来自不同域” - 问题的一部分，相应地更新了帖子。

【讨论】：

问题是 with a different domain，这样会从Same Origin Policy 获得权限错误。
display: none 和 display: block 都将评估为 true。
忘记了，把== "none"加到最后，加了。感谢您指出。
stackoverflow.com/questions/2161388/…

【解决方案2】：

您应该查看Intersection Observer API。我能够让它适用于两个不同的域。

这样的事情对我有用：

function handleIntersect(entries, observer) {
  console.log('intersecting', entries[0].isIntersecting, 'visible', entries[0].isVisible);
}

let observer;

let options = {
  root: null,
  rootMargin: "0px",
  threshold: [0.5]
};

observer = new IntersectionObserver(handleIntersect, options);
// The DOM element here should be a div that captures the whole content of the iframe.
observer.observe(DOM_ELEMENT);

【讨论】：

您忘记添加trackVisibility: true 和delay: 100 //100 is minimum 选项：否则entries[0].isVisible 将始终返回false。另外，我相信您可以使用它来观察 iframe 元素本身。（仅在 webconsole 上测试过。）