有没有一种方法可以确定一个iframe是否可见/活动？

Question

有没有一种方法可以确定一个iframe是否可见/活动？

javascriptiframecross-domain

3

我有一个在其他网站（不同的域名）上运行的iframe。在iframe内部，我能否知道它对用户是否可见，或者包含此iframe的页面是否处于活动状态。

谢谢。

- Alon Ashkenazi

1

你可以检查 iframe 是否可点击。例如，如果该像素不可见，则 document.elementFromPoint(0,0) 返回 null。但是，如果 iframe 仅从屏幕滚动出去，它也会返回 null... - Teemu

这看起来是一个不错的方向，但我检查过的所有情况中document.elementFromPoint(0,0)都返回<html>标签（包括iframe滚动、页面失去焦点等），你可以更具体一些吗？ - Alon Ashkenazi

我在IE9、FF、Chrome和Opera中进行了快速测试，只有在框架页面中的window.onload触发时才使用display:none/block。IE和Chrome返回了我预期的结果（null/HTMLElement）。当为none时，FF会给出一个错误，只有Opera始终返回一个HTMLElement。不幸的是，我无法进行跨域测试，只能在本地测试。我没有测试滚动，这更多是基于我以前使用elementFromPoint()的经验猜测。请注意，这个检查应该在iframe中进行，而不是在任何主页面中进行。 - Teemu

2

看起来我浪费了你的时间，对此感到抱歉。这个只在IE中可靠地工作。其他浏览器似乎会找到即使它不在屏幕上时的元素，并且当设置visibility:hidden时也是如此。而且Opera总是能找到该元素:(。与IE相同的行为在https://developer.mozilla.org/en-US/docs/DOM/document.elementFromPoint中有描述，但显然这是不正确的。 - Teemu

2个回答

1

你应该查看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);

- Siul

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

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- David Müller · Accepted Answer

实际上这是不可能的，因为如果你在一个不同的域名/端口/协议下，你无法从框架本身访问嵌入框架的主页面。

如果您的 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>

更新忽略了问题中"来自不同域名"的部分，已经相应地更新了帖子。