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");
});
});
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With