javascript 使用 Jquery 从 iframe 内的子级访问父窗口滚动事件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9872162/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Access parent window scroll event from child inside iframe with Jquery
提问by Erin
I have a small javascript/jquery script on page1 (an aspx page) that scrolls an iframe loaded with page2 so that it stays with you on the page as you scroll up and down page1. However, when I load page1 inside an iframe for another parent page the scroll affect doesn't work.
我在 page1（一个 aspx 页面）上有一个小的 javascript/jquery 脚本，它滚动加载了 page2 的 iframe，以便在您上下滚动 page1 时它会留在页面上。但是，当我在 iframe 中为另一个父页面加载 page1 时，滚动效果不起作用。
I've tried using window.parent in the calls, but the script still doesn't activate and scroll the page2 iframe as you scroll page1 within the iframe of the parent page (another aspx page). I hope that makes sense.
我已经尝试在调用中使用 window.parent，但是当您在父页面（另一个 aspx 页面）的 iframe 中滚动 page1 时，脚本仍然没有激活和滚动 page2 iframe。我希望这是有道理的。
Here is the script I've tried:
这是我尝试过的脚本：
<script type="text/javascript">
$(window.parent.document).ready(function () {
var $scrollingDiv = $("#IframeDir");
$(window.parent).scroll(function () {
$scrollingDiv
.stop()
.animate({ "marginTop": ($(window.parent).scrollTop() + -10) + "px" }, "slow");
});
});
</script>
It works if I just load page1 in it's own tab or window, but if I load page1 within an iframe into the parent page, it doesn't seem to see the scroll event of the parent page.
如果我只是在它自己的选项卡或窗口中加载 page1，它就可以工作，但是如果我将 iframe 中的 page1 加载到父页面中，它似乎看不到父页面的滚动事件。
Thanks in advance for any suggestions! Erin
在此先感谢您的任何建议！艾琳
回答by Juan Mendes
See this answer Run JQuery in the context of another frame
请参阅此答案在另一个框架的上下文中运行 JQuery
You have to pass in the context to search in (the parent document)
您必须传入上下文才能搜索（父文档）
// Untested
$(window.parent.document, window.parent.document).ready(function () {
var $scrollingDiv = $("#IframeDir");
$(window.parent, window.parent.document).scroll(function () {
$scrollingDiv
.stop()
.animate({ "marginTop": ($(window.parent, window.parent.document).scrollTop() + -10) + "px" }, "slow");
});
});
回答by Nasir Hussain
I also wanted the floating div within iframe and Rantul this code worked for me!
我还想要 iframe 和 Rantul 中的浮动 div 这段代码对我有用！
$(parent.window).scroll(function() {
//parent document scroll functions go here
});
回答by Rantul
I don't think you can call $(window.parent).scroll()from within $(document).ready()or in this case $(window.parent.document).ready(). For that matter I don't think $(window.parent).scroll()will work at all I think it needs to be $(parent.window).scroll()
我不认为你可以$(window.parent).scroll()从内部$(document).ready()或在这种情况下调用$(window.parent.document).ready()。就此而言，我认为$(window.parent).scroll()根本行不通，我认为它需要$(parent.window).scroll()
This is how I've done it before:
这是我以前的做法：
$(document).ready(function() {
//document ready functions go here
});
$(parent.window).scroll(function() {
//parent document scroll functions go here
});
And to answer your other question, I do believe you need jQuery on the parent page as well for this to work.
为了回答您的另一个问题，我确实相信您还需要在父页面上使用 jQuery 才能使其正常工作。
