【发布时间】：2014-09-15 07:01:26
【问题描述】：
我有两个页面：parent.html 和 child.html。 child.html 包含在带有 iframe 的 parent.html 中。
child.html 页面在其 parent.window 上绑定一个滚动事件，以便检测何时在顶层触发了滚动事件。子页面在 parent.window 上设置一个属性，以便在每次触发滚动事件时显示和更新增量。
这是两个页面的代码：
页面父.html：
<html>
<body>
<iframe border="1" src="child.html"></iframe>
<div style="height:1600px; width:300px; background:gray;">
A div just here to activate the scrollbar
</div>
</body>
</html>
子页面：
<html>
<body>
<a target="_self" href="">Reload this page</a>
<div class="test"></div>
<script type="text/javascript">
parent.window.increment = 1;
var onScroll = function (event) {
parent.window.increment++;
$('.test').html(parent.window.increment);
};
$(parent.window).off('scroll');
$(parent.window).on('scroll', onScroll);
</script>
</body>
</html>
此设置的问题如下：
在 Chrome 上（适用于 Firefox），如果您第一次加载页面，则每次检测到滚动事件时 parent.window.increment 正确递增 1（当父页面滚动条被移动）。但是，如果您按下“重新加载”链接，则 parent.window.increment 在触发滚动事件时不再增加一，而是增加二。如果您再次按下 Reload 链接，则 increment 属性会增加 3，等等。
可以在此处找到一个工作示例：http://jsfiddle.net/cm0s/ngZkq/16/。
我并不是真的在寻找解决方案（我发布的代码只是我在另一个项目中面临的问题的一个示例）。我更想了解发生了什么。如果我犯了菜鸟的错误？
这里有两点我真的不明白：
1. parent.window.increment 未重置
我不明白为什么增量属性并不总是重置为 1。当我们按下“重新加载”链接时，总是会执行以下行：
parent.window.increment = 1;
2。适用于 Firefox，但不适用于 Chrome
我也不明白为什么它不能在 Chrome 上运行，但在 Firefox 上运行良好。在 Firefox 中，如果您尝试 fiddle demo 并多次单击“重新加载”链接，则当您移动滚动条时，parent.window.increment 始终递增 1。
编辑说明：
我还创建了一个小提琴来显示单击事件的相同问题： http://jsfiddle.net/cm0s/WYy6U/3/
另一个使用 onscroll javascript 函数（如@hex494D49 所解释），因此在所有浏览器中都能完美运行： http://jsfiddle.net/cm0s/D6j5G/1/
编辑注释 2：
我在 jquery 错误跟踪器上发布了一张票：http://bugs.jquery.com/ticket/15204。
票已关闭。该错误被描述为“一种不寻常的浏览器行为”。
【问题讨论】：
标签： javascript jquery html google-chrome iframe