Binding scroll event to iframe

Question

I'm using an iframe to load an external URL. Here's the structure -

<iframe id="iframe-wrapper" src="http://blog.kpmg.ch/" style="width: 100%; height: 100%; overflow-y: scroll"></iframe>

I'm trying to do something when I scroll through the iframe contents. I tried various ways, nothing worked. Here are some things I tried already -

1) jQuery iframe scroll event (IE)

    $(window).load(function(){
      $($('#iframe-wrapper').contents()).scroll(function(){
       alert("Scrolling");
      }); 
    });

2) jQuery iframe scroll event (IE)

    $('#iframe-wrapper').load(function(){
      $($(this)[0].contentWindow).scroll(function(){
        alert("Scrolling");
      });
    });

3) How to make IFRAME listen to scroll events as parent when click event within parent iframe is triggered

$("#iframe-wrapper").load(function(){
    var iframeContent = getFrameTargetElement( document.getElementById("iframe-wrapper") );
    iframeContent.onscroll = function(e){
        alert("Scrolling");
    };        
});

4) Jquery and binding an event to an iframe

$("#iframe-wrapper").load(function(){
    $("#iframe-wrapper").contents().find("body").scroll( function(e) {
        alert("Scrolling");
    });
});

duplicate is something which you havn't seen or tried and which could work! I already tried the link, check the 3rd example I showed and help me if you can please where I have done wrong. Don't find duplicate before going through and understanding full question. :) — Shuvro, Dec 18 '14 at 09:15
@Jai, yeah I tried it already, didn't work for me. I don't know what's going wrong here. I found somewhere the event should be bound after the iframe is fully loaded. So I stopped trying it that way. — Shuvro, Dec 18 '14 at 09:18
@Shuvro Did you consider the possibility that your problem is with the calling the alert() function, not in the iframe itself? Have you looked at this http://stackoverflow.com/questions/12139953/displaying-an-alert-box-inside-an-iframe-in-an-html-page — Khalid T., Dec 18 '14 at 09:27
@KhalidT. thanks for pointing out to that. But I already tried it this way. Didn't work either. :) — Shuvro, Dec 18 '14 at 09:37
Ok i'll just put it out there: did you wrap the function in $(document).ready(){};? — g_uint, Dec 18 '14 at 09:50
@g_m, yeah, I did wrap the function in $(document).ready(){}; — Shuvro, Dec 18 '14 at 09:53
@g_m iframe gets loaded, but the scroll event is not getting bound. Nothing inside the function is working. No output in console, no alert or nothing else. — Shuvro, Dec 18 '14 at 09:59
Is the iframe loaded from the same origin as the parent page? If not then I don't think you can do it. Check this thread: http://stackoverflow.com/questions/10864870/scroll-a-cross-domain-child-iframe — Nitzan Tomer, Dec 18 '14 at 11:12

score 1 · Accepted Answer · edited May 23 '17 at 11:49

1

This is not going to work. It is because of Same Origin Policy. Because your page and the source of the iFrame are not on the same domain, the event will never fire on your main page. Read more about it here:
https://developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy

Maybe you can make it work with one of these solutions:
Ways to circumvent the same-origin policy

So for external URLs(not on the same domain) this will always be problematic.

edited May 23 '17 at 11:49

Community

1
1

answered Dec 18 '14 at 11:39

g_uint

1,903
3
17
30

Thanks for the reply and the links. At least now I know what's causing the problem and what should I do. This is why other solution's didn't work for me. Need to find a workaround. – Shuvro Dec 22 '14 at 06:58
I did direct you to another thread (in a comment on your question) where they suggest how to go around it (using the postMessage API) but that will only work if you have control over both pages (the parent and the iframe), if that's not the case then you don't really have a way to do what you want and for good reasons. – Nitzan Tomer Dec 22 '14 at 15:15

Binding scroll event to iframe

1 Answers1

Linked