Problem triggering a scroll event in an iFrame in Javascript

Question

I'm having a hard time on this one, and although many people on the internet seem to have the same problem, no solution online has worked for me.

I have the following html code:

And then this is the following js code I've tried:

1)

$("#documentIFrame").on('load', function () {
                var iframe = document.getElementById('documentIFrame');
                iframe.contentDocument.addEventListener('scroll', function (event) {
                    console.log("SCROLL");
                }, false);
            });

This shows no result, it will not even enter the function.

2.

            var iframe = $("#documentIFrame").contentWindow;
            
            $(iframe).scroll(function () {
                console.log("NOW SCROLLING...");
                if ($(iframe).scrollTop() == $(iframe).height() - $("#documentIFrame").height()) {
                    alert("Reached bottom!");
                }
            });

Same as before, no result at all.

3)

                var iframe = document.getElementById("documentIFrame").contentWindow;
                console.log(iframe);


                iframe.onscroll = function () {
                    console.log("scrolling...");
                }

Same, no result.

EDIT: Some extra info on this one, in this case, if I console.log() the iframe AFTER I assign the function to the onscroll event, and I search within the iframe, the onscroll event appears as null.

EDIT 2: This may come in handy for some of you, using jQuery to select the .contentWindow doesn't work for me, it comes as undefined, but if I use the plain JS code:

document.getElementById("documentIFrame").contentWindow;

... then it returns the element just fine.

I have also tried .contents() and contentDocument instead of contentWindow, and the result is the same; if I try to console.log() those elements, they always come undefined.

I've tried setting the scrolling function on the document.ready() and also on a function I call on a onclick event triggered by a different component; always is the same result.

I've read something about same origin policy, but I don't think that should be it, as this document (the one in the src of the iframe) comes from the localhost, that should pass as "same origin", correct?

Any help would be greatly appreciated.

user_119549 · Answer

This seems to work for me:

document
  .querySelector('#documentIFrame')
  .addEventListener('load', e => {
    e.target.contentWindow.addEventListener('scroll', e => {
      console.log('scrollin');
    });
  });

Problem triggering a scroll event in an iFrame in Javascript

1 Answers