如何知道何时进入iframe?

cla*_*l3r 8 html javascript iframe jquery

如果我有一个包含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>
Run Code Online (Sandbox Code Playgroud)

那么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>
Run Code Online (Sandbox Code Playgroud)

我使图像更清晰. 在此输入图像描述

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

Dar*_*ney 0

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

添加一个 id 到 iframe 然后你可以使用这个:

if ($('#iframeID').visible(true)) {
  // The iframe is visible
} else {
  // The iframe is NOT visible
}
Run Code Online (Sandbox Code Playgroud)

  • 我认为“.visible”检查CSS“visibility”属性是否设置为“visible”,而不是检查它是否在视图中 (2认同)