时间戳

首页 > 解决方案 > iframe 可以检查自己是否在视口中吗？

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

问题描述

我正在iframe用一个小的 HTML5 视频创建一个。除非在视口中，否则视频不应开始播放iframe。

我注意到这并不像我想的那么容易，因为iframe它就像一个沙盒环境。是否有可能iframe知道它是否在视口中？

标签： javascriptiframeviewport

解决方案

检查元素是否在视口中

在这里，您可以找到一个很好的实现来检查元素是否在视口中：

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
}

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

iframe然而，现代浏览器只有在指向的页面与主页指向的相同域时才允许这种通信。如果两个页面属于不同的域，那么现代浏览器会抛出CORSS 错误。

作为替代，您可以在主页和加载到其中的页面之间进行消息传递iframe，但为此，主页的开发人员需要合作。

推荐阅读