Question

我有两个页面：parent.html和child.html。 child.html包含在带有iframe的parent.html中。

child.html页面在其parent.window上绑定一个滚动事件，以便检测何时在顶层触发滚动事件。子页面在parent.window上设置一个属性，以便在每次触发滚动事件时显示和更新增量。

以下是两页的代码：

Page parent.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>

Page child：

<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不再增加1，而是增加2。如果再次按“重新加载”链接，则增量属性将增加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。

编辑注：

我还创建了一个小提琴来显示与click事件相同的问题： http://jsfiddle.net/cm0s/WYy6U/3/

另一个使用onscroll javascript函数（由@ hex494D49解释），因此在所有浏览器中都能完美运行： http://jsfiddle.net/cm0s/D6j5G/1/

编辑注2：

我在jquery bug跟踪器上发布了一张票：http://bugs.jquery.com/ticket/15204。

门票已经关闭。该错误被描述为“一种不寻常的浏览器行为”。

Answer 1

您可能在jQuery中发现了一个错误:)或者至少是jQuery的onscroll事件实现的奇怪行为。也许，对于这两个问题，这可能是一个较短的答案，但让我们更详细地分析这种行为。

如果您在代码中添加此console.log(parent.window.increment);，则会看到Chrome首次增加increment值的价值就好了;但是第二次，滚动量增加了2，跟随1-2, 3-4, 5-6, ...，increment div内的2-3, 5-6, 8-9, 11-12, ...值似乎无序（如2,4 ，6，......）;第三次Chrome开始跳过此div之类的步骤，3-4, 7-8, 11-12, 15-16, ...中的值分别为3,6,9,12，......;在第四次，值变为increment，这使得div内的scroll值更加模糊。

另一方面，上面的代码片段在Firefox中工作正常，但滚动量不会增加1但至少增加5，这只能观察控制台。也许这可以调整 - 我尝试在Firefox about:config部分更改与increment相关的一些值但到目前为止没有成功。

然后我只是想我可以稍微更改你的代码片段（不包括jQuery），我们就是这样 - 下面的代码段在所有浏览器中都能正常运行。 Firefox上的滚动量仍为5，但您会看到重新加载的0值始终重置为// Modified code of child.html (iframe) file // HTML <a target="_self" href="">Reload this page</a> <div id="test"></div> // JavaScript parent.window.increment = 0; parent.window.onscroll = function(){ parent.window.increment++; document.getElementById('test').innerHTML = parent.window.increment; console.log(parent.window.increment); };，并且没有像jQuery代码段中提到的那样跳过。

EDIT:

工作jsFiddle（在IE，Firefox，Chrome和Opera上测试）

onclick正如@NicolasForney（OP）在其编辑部分中所说的那样，使用onscroll事件会遇到同样奇怪的行为。我想补充说，不使用jQuery就可以避免使用jQuery，就像上一个 <a target="_self" href="">Reload this page</a> <div id="counter"></div> // JavaScript parent.window.counter = 0; parent.window.onclick = function(){ parent.window.counter++; document.getElementById('counter').innerHTML = parent.window.counter; console.log(parent.window.counter); };事件的情况所示。

{{1}}

工作jsFiddle（如上测试）

这肯定会导致一个错误，在此期间应该更详细地探讨......

jQuery Bug - 将iframe中的事件绑定到parent.window

此设置的问题如下：

编辑注：

编辑注2：

1 个答案: