CODEWITHSUNDEEP
javascriptjqueryinternet-exploreriframe
Philip
Philip

Reputation:

jQuery iframe scroll event (IE)

Can't listen to the scroll event in Internet Explorer 7.

I've tried:

$("#myIframe").scroll(function() { alert('hi'); })

Works for FF:

$($("#myIframe").contents().get(0)).scroll(function() { alert('hi'); })

Getting keypresses work:

$($("#myIframe").contents().get(0)).keydown(function() { alert('hi'); })

Upvotes: 6

Views: 15828

Answers (4)

Reinaldo
Reinaldo

Reputation:

Put this on the parent:

var childScrollHandler = function () {
   alert('Scrolling going on');
}

And then put this on the iframe content:

$(document).bind('scroll', function(ev){
    parent.childScrollHandler(ev);
});

replace $(document) by whatever element you are trying to listen into.

Upvotes: 0

KaNaR
KaNaR

Reputation: 31

I know it's an old thread, but some people could find it useful.

$(document).scroll() can be replaced by $(window).scroll(), and it has worked for me so far.

Upvotes: 3

joe8756438
joe8756438

Reputation: 11

Try this:

2 things must happen before you can traverse the dom of a nested browsing context.

You need to know that the iframe exists, taken care of with the document ready event.

And you need to make sure that the iframe has loaded.

ie:

    $(document).ready(function(){

        // #page is the id of the iframe
        $('#page').load(function(){
            // $(this)[0].contentWindow is the window of your nested browsing context/ iframe
            $($(this)[0].contentWindow).scroll(function(){
                console.log($(this).scrollTop());
            });
        });
     });

One thing to note is that this will definitely not work cross browser in Firefox.

Upvotes: 1

Jose Basilio
Jose Basilio

Reputation: 51488

As much as I love jQuery. I can't get this to work. However, I tried this in plain old javascript and it worked just fine in IE, FF,Safari and Chrome.

<script type="text/javascript">
    window.onload = function() {
      var frm = document.getElementById("myIframe").contentWindow;
      frm.onscroll = function(){
        alert("EUREKA");
      }
    }
</script>

EDIT: The following works in FF, Safari and Chrome when using window.load(). When using document.ready it only works in FF. For whatever reason it doesn't work in IE8 in either event.

$(window).load(function(){
    $($('#myIframe').contents()).scroll(function(){
       alert('frame scrolled in jquery');
    }); 
});

Upvotes: 12

Related Questions