Binding scroll event to iframe

debugcn Published at Dev

Shuvro

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

g_uint

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.

Collected from the Internet

Please contact [email protected] to delete if infringement.