Can I bind a function to the onscroll event of the parent window?

Question

I have a page that does not load jQuery. An <iframe> included on that page (in the same domain) does load jQuery.

Using jQuery, is it possible to bind a function to an event of the window object of the parent page, even though it doesn't load jQuery?

Accessing the parent window doesn't seem to be a problem; this works (at least in Firefox 4):

console.log($(parent)); // displays "jQuery(Window index.html)" in the console

To give some context, I'm developing the document to be loaded within the <iframe>, but I don't control the parent page, so I can't use a solution that requires adding jQuery to it. Ultimately I want to subscribe to the onscroll event of the parent window to execute a function in the <iframe> every time that scrolling happens in the viewport.

I've tried (within the <iframe>):

function my_function() {
  console.log('Scrolling...');
}
$(parent).scroll(my_function);

However, that didn't work.

Any help would be appreciated.

Here is a working example:

http://troy.onespot.com/static/stack_overflow/onscroll/parent.html

The document in the <iframe> is here:

http://troy.onespot.com/static/stack_overflow/onscroll/iframe.html

Answer 1

Try:

parent.onscroll = function() { ... };

---

Update:

Try this, it works for me:

$(parent.document).scroll(function() { ... });

Answer 2

If you are trying to control a parent page which in another domain, so this is not possible for security reasons.

And you can find many articles about this problem, If this is not your case tell us because sure there is another problem.

If in the same domain, what about using this:

$(document).ready(function(){ $(this).parent().scroll(function(){//stuff}); });

$(document).ready(function(){ 
   $(window.parent.document).scroll(function(){//stuff});
});