如果在跨域 iframe 内，则检测 window 可见性

Question

如果网页 A 在跨域网页 <iframe> 中呈现 B，如何知道 A 何时在 B 中可见？

例如，如果网页 A 在 B 的文档滚动条中远低于网页，用户必须向下滚动才能看到它，如何知道用户何时向下滚动到足以看到 <iframe>.

只有control/access个网页A.

由于 Same-Origin Policy，无法访问事件或计算来获取此数据。

Page Visibility API 仅在网页处于浏览器选项卡活动状态时通知。

Answer 1

Intersection Observer API 可用于观察 HTMLElement 视口可见性变化。

要检查网页何时可见，body 元素至少有 10% 的内容可见或不可见。

const options = { threshold: 0.1 };
const callback = ([bodyElement]) => {
  if (bodyElement.isIntersecting) {
    // Element is visible.
  }
};
const observer = new window.IntersectionObserver(callback, options);

const bodyElement = document.querySelector('body');
observer.observe(bodyElement);

查看规范了解更多信息。

请记住：这不是标准 API。所以你可能需要回退并且它没有得到广泛支持。此外，可能存在性能问题。

如果在跨域 iframe 内，则检测 window 可见性

Detect window visibility if inside cross domain iframe

javascript

dom

cross-domain