Question

如果我有一个包含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可以知道它是否可以被＆＃34;看到＆＃34;？例如，通过了解与屏幕顶部相关的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>

我让图像更清晰。 enter image description here

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

Answer 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 相同！

Answer 2

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

向iframe添加ID，然后您可以使用：

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

Answer 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));
}

Answer 4

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

如何知道何时进入iframe？

4 个答案: