javascript - Can I bind a function to the onscroll event of the parent window? - Stack Overflow

admin管理员组

文章数量:1330909

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:

.html

The document in the <iframe> is here:

.html

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./static/stack_overflow/onscroll/parent.html

The document in the <iframe> is here:

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

• javascript
• jquery
• events
• iframe
• jquery-events

Share Improve this question Follow edited Mar 19, 2022 at 17:46 Brian Tompsett - 汤莱恩 5,8937272 gold badges6161 silver badges133133 bronze badges asked Mar 30, 2011 at 19:29 BungleBungle 19.7k2525 gold badges8181 silver badges108108 bronze badges 1

• Both of your working demo links are broken. Either fix them or remove them please. – dano Commented Aug 15, 2012 at 17:25

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

Try:

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

---

Update:

Try this, it works for me:

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

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

本文标签： javascriptCan I bind a function to the onscroll event of the parent windowStack Overflow