当一个iframe出现在视野范围内时，如何知道？

Question

当一个iframe出现在视野范围内时，如何知道？

9

如果我有一个包含嵌入框架（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的页面。

- clankill3r

你能在 JSFiddle 上演示一下吗？ - Piotr Dajlido

好的，请给我几分钟。 - clankill3r

这对于 jsfiddle 真是太糟糕了！ - clankill3r

这不是重复的。这更加棘手... - clankill3r

@clankill3r 在你的编辑后，同意这不是重复内容。 - dayuloli

显示剩余2条评论

4个回答

0

这对我有用。它要求包含 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));
            }

- clankill3r

0

使用这个：https://github.com/customd/jquery-visible 给 iframe 添加一个 id，然后你就可以使用这个了：

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

- StudioTime

2

我认为 .visible 检查的是 CSS 的 visibility 属性是否设置为 visible，而不是它是否在视图中。 - dayuloli

抱歉，忘记了 GitHub 的链接 - 现在已添加。 - StudioTime

0

这是一个类似于检测无限滚动的问题 - 我们如何知道“加载更多”按钮是否可见？

作为上面链接的扩展，您还可以编写一个函数来检测任何元素是否可见（在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));
}

- dayuloli

2

不一样。问题是我必须从 iframe 中知道，而不是包含 iframe 的页面。 - clankill3r

@clankill3r 我明白了，这是完全不同的领域！很高兴你编辑了你的问题来澄清这一点。 - dayuloli

是的，似乎每个人都误解了 :) 看来我不太擅长解释事情 :) - clankill3r

哦，我得到了“TypeError：$ elem.offset（...）未定义”的错误。 - clankill3r

另外，为什么要使用 $window.height()？这意味着页面越长，docViewBottom 的值就越高，因此它对我来说不起作用。 - clankill3r

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- dekajoo · Accepted Answer

我知道这是一个老问题，但Chrome的一些新API已经发布，可以回答你在最新版本的Chrome（22+）中的问题。

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

有一个正在开发的polyfill（同一存储库），但我认为它只能在父网页上运行，而不能在iframe内部运行。

对于其他浏览器，可以根据时间攻击的黑暗方式进行操作，本文很好地解释了这一点：https://www.contextis.com/media/downloads/Pixel_Perfect_Timing_Attacks_with_HTML5_Whitepaper.pdf

编辑：即将推出的Firefox版本现在默认激活了InteractionObserver功能，Edge也是如此！