How to know when an iframe comes into view?

Question

If I have a site that holds an 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>

Is it then possible for the iframe to know if it can be "seen"? This for example by knowing the top position of the iframe related to the top of the screen.

This is my test iframe: (all values are 0, no matter scroll pos of parent)

<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>

I made an image to be more clear. enter image description here

I have to know from within the iframe if it's visible or not! So not from within the page that holds the iframe.

possible duplicate of [Check if element is visible after scrolling](http://stackoverflow.com/questions/487073/check-if-element-is-visible-after-scrolling) — dayuloli, Mar 17 '15 at 15:49
You might want to check this out - http://stackoverflow.com/q/536538/2317532. The solution involves using `window.parent` — dayuloli, Mar 17 '15 at 16:17

dekajoo · Answer 1 · 2018-10-12T22:32:43.393

3

I know this is an old question but some new API from Chrome have been released that could answer your question on the latest versions of Chrome (22+)

The InteractionObserver you can find it here: https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API

There is a polyfill that is being developped (same repo) but it will not work from within the iframe afaik only if the script is on the parent webpage.

For other browsers their is some dark ways to do it based on timing attack, this article explains it pretty well: https://www.contextis.com/media/downloads/Pixel_Perfect_Timing_Attacks_with_HTML5_Whitepaper.pdf

Edit: Next Firefox version to come has the InteractionObserver feature activated by default now, Same for Edge !

edited Oct 12 '18 at 22:32

answered Oct 03 '16 at 13:18

dekajoo

2,024
1
25
36

The link is broken. – trysis Oct 11 '18 at 16:37
I fixed @trysis – dekajoo Oct 12 '18 at 22:33
Thanks. It may be worth noting there's a polyfill for browsers that don't have IntersectionObserver. – trysis Oct 13 '18 at 11:28
There is but it is based on position of the elements and it will not work if you're in an iframe. – dekajoo Oct 14 '18 at 10:41
Not sure if this applies everywhere, but the element of my had some intersection or not depending on whether the <iframe> had `display: none`. The element and, obviously, everything inside , always had some intersection. – trysis Oct 29 '18 at 18:00

score 0 · Answer 2 · answered Mar 17 '15 at 15:40

0

Use this: https://github.com/customd/jquery-visible

Add an id to the iframe then you can use this:

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

answered Mar 17 '15 at 15:40

StudioTime

22,603
38
120
207

2

I thought `.visible` checks whether the CSS `visibility` property is set to `visible`, not whether it is in view – dayuloli Mar 17 '15 at 15:42
apologies, forgot the link to github - added now – StudioTime Mar 17 '15 at 15:44

score 0 · Answer 3 · edited May 23 '17 at 12:02

0

This is a similar issue with detecting infinite scrolling - How do we know the 'Load more' button is visible?

As an extension to the above link, you can also write a function which will detect if any element is visible (on the y-axis) (copied over for reference):

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

edited May 23 '17 at 12:02

Community

1
1

answered Mar 17 '15 at 15:44

dayuloli

16,205
16
71
126

2

It's not similar. The problem is I have to know from within the iframe. Not the page that holds the iframe. – clankill3r Mar 17 '15 at 16:13
@clankill3r I see, that's a different ballpark altogether! It's good you edited your question to clarify this. – dayuloli Mar 17 '15 at 16:14
Yeah everyone seems to understand it wrong :) I'm not that good in explaining things it seems :) – clankill3r Mar 17 '15 at 16:15
O yeah, i get 'TypeError: $elem.offset(...) is undefined' – clankill3r Mar 23 '15 at 12:32
Also, why do you use $window.height()? This means the longer the page the higher the value of docViewBottom and therefor it's not working for me. – clankill3r Mar 23 '15 at 12:52

score 0 · Answer 4 · answered Apr 02 '15 at 11:00

This worked for me. It requires that the page holding the iframe has 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));
            }

How to know when an iframe comes into view?

4 Answers4