Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Binding scroll event to iframe [duplicate]

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");
    });
});
like image 252
Shuvro Avatar asked Nov 21 '25 04:11

Shuvro


1 Answers

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.

like image 83
g_uint Avatar answered Nov 22 '25 16:11

g_uint



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!