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

Question

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

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

只能控制/访问 web 页面A 。

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

页面可见性 API仅在 web 页面处于浏览器选项卡活动状态时通知。

Answer 1

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

要检查 web 页面何时可见，当至少 10% 的内容可见或不可见时，会观察body元素。

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。 因此，您可能需要回退，但它并未得到广泛支持。 此外，可能存在性能问题。