如何知道 iframe 何时出现？答案

【问题标题】：How to know when an iframe comes into view?如何知道 iframe 何时出现？
【发布时间】：2015-05-20 03:05:00
【问题描述】：

如果我有一个包含 iframe 的网站：

<html>

    <body>
        <br/>
        <br/>
        <br/>
        <br/>
        <br/>
        <br/>
        <br/>
        <br/>
        <br/>
        <br/>
        <br/>
        <br/>
        <br/>
        <br/>
        <br/>
        <br/>
        <br/>
        <br/>
        <br/>
        <br/>
        <iframe src="http:/somelink.com/iframe.html"></iframe>
    </body>

</html>

那么 iframe 是否有可能知道它是否可以“看到”？例如，通过了解与屏幕顶部相关的 iframe 的顶部位置。

这是我的测试 iframe：（所有值都是0，不管父级的滚动位置）

<html>
    <head>
        <script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
        <script type="text/javascript">

            $(document).ready(function() {
                console.log("ok");  

                check();

            });


            function check() {

                // position of parent
                var parentScrollTop = $(window.parent.document).scrollTop();
                console.log("parentScrollTop: "+parentScrollTop);

                // self position
                var bodyPosition = $("body").position().top;
                console.log("body position: "+bodyPosition);

                setInterval(check, 1000);
            }

        </script>

        <style type="text/css">
            body {
                background-color: red;
            }
        </style>
    </head>
    <body>

    </body>
</html>

我做了一个更清晰的图像。

我必须从 iframe 中知道它是否可见！所以不是来自包含 iframe 的页面。

【问题讨论】：

你能搞定这个吗？
是的，给我几分钟
这对 jsfiddle 来说太可怕了！
Check if element is visible after scrolling 的可能重复项
不是重复的。这更棘手......

标签： javascript jquery html iframe

【解决方案1】：

我知道这是一个老问题，但 Chrome 的一些新 API 已经发布，可以回答您关于最新版本 Chrome (22+) 的问题

InteractionObserver 你可以在这里找到它：https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API

有一个 polyfill 正在开发中（相同的 repo），但只有当脚本位于父网页上时，它才会在 iframe afaik 中工作。

对于其他浏览器，它们是一些基于定时攻击的黑暗方法，这篇文章解释得很好：https://www.contextis.com/media/downloads/Pixel_Perfect_Timing_Attacks_with_HTML5_Whitepaper.pdf

编辑：下一个 Firefox 版本现在默认激活 InteractionObserver 功能，Edge 也一样！

【讨论】：

链接已损坏。
我修复了@trysis
谢谢。值得注意的是，对于没有 IntersectionObserver 的浏览器，有一个 polyfill。
有，但它基于元素的位置，如果你在 iframe 中，它将不起作用。
不确定这是否适用于所有地方，但我的的元素有一些交集，这取决于 <iframe> 是否有<code>display: none</code>。元素，显然，中的所有内容，总是有一些交集。

【解决方案2】：

这对我有用。它要求持有 iframe 的页面有 jQuery。

function isScrolledIntoParentView(elem) {


                var $elem = window.parent.$(elem);

                var docViewTop = $(window.parent).scrollTop();
                var docViewBottom = docViewTop + window.parent.innerHeight;

                var elemTop = $elem.offset().top;
                var elemBottom = elemTop + $elem.height();

                console.log("isScrolledIntoParentView");
                console.log($elem);
                console.log("docViewTop "+docViewTop);
                console.log("docViewBottom "+docViewBottom);
                console.log("elemTop "+elemTop);
                console.log("elemBottom "+elemBottom);

                return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));
            }

【讨论】：

【解决方案3】：

这是detecting infinite scrolling 的类似问题 - 我们如何知道“加载更多”按钮是否可见？

作为上述链接的扩展，您还可以write a function 检测是否有任何元素可见（在 y 轴上）（复制以供参考）：

function isScrolledIntoView(elem)
{
    var $elem = $(elem);
    var $window = $(window);

    var docViewTop = $window.scrollTop();
    var docViewBottom = docViewTop + $window.height();

    var elemTop = $elem.offset().top;
    var elemBottom = elemTop + $elem.height();

    return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));
}

【讨论】：

不相似。问题是我必须从 iframe 中知道。不是包含 iframe 的页面。
@clankill3r 我明白了，这完全是一个不同的球场！很高兴您编辑了您的问题以澄清这一点。
是的，每个人似乎都理解错了：）我似乎不太擅长解释事情：）
哦，是的，我得到 'TypeError: $elem.offset(...) is undefined'
另外，为什么要使用 $window.height()？这意味着页面越长，docViewBottom 的值就越高，因此它对我不起作用。

【解决方案4】：

使用这个：https://github.com/customd/jquery-visible

给 iframe 添加一个 id 然后你就可以使用这个了：

if ($('#iframeID').visible(true)) {
  // The iframe is visible
} else {
  // The iframe is NOT visible
}

【讨论】：

我以为.visible检查CSS visibility属性是否设置为visible，而不是是否在视图中
抱歉，忘记了 github 的链接 - 现在添加