javascript - iframe 可以检查自己是否在视口(viewport)中吗？

Question

我正在创建一个带有小型 HTML5 视频的 iframe。除非 iframe 在视口(viewport)中，否则视频不应开始播放。

我注意到这并不像我希望的那样容易，因为 iframe 就像一个沙盒环境。 iframe 甚至有可能知道它是否在视口(viewport)中吗？

Answer 1

检查元素是否在视口(viewport)中

Here您可以找到一个很好的实现来检查元素是否在视口(viewport)中:

function isInViewport(element) {
    const rect = element.getBoundingClientRect();
    return (
        rect.top >= 0 &&
        rect.left >= 0 &&
        rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
        rect.right <= (window.innerWidth || document.documentElement.clientWidth)
    );
}

到达父窗口

在 iframe 中，您可以像这样访问父 window:

if (window.parent.isInViewport(document.querySelector('iframe'))) {
    //do something
}

(在上面，为了简单起见，我在父 window 中搜索第一个 iframe，您可能需要更改选择器)

但是，现代浏览器仅在 iframe 指向的页面与主页指向的域相同时才允许这种通信。如果这两个页面属于不同的域，那么现代浏览器将抛出 CORSS error。 .

你可以有一个messaging在主页和加载到 iframe 中的页面之间作为替代，但为此目的，主页的开发人员需要合作。