body.onload 是否等待 IFrame？答案

【问题标题】：Does body.onload wait for IFrames?body.onload 是否等待 IFrame？
【发布时间】：2010-10-31 17:23:06
【问题描述】：

我知道onload 事件在触发之前等待页面资源加载 - 图片、样式表等。

但这是否包括页面内的 IFrame？换句话说，是否保证所有子框架的onloads 总是在父框架之前触发？

另外，如果浏览器之间的行为不同，请告诉我。

【问题讨论】：

标签： html dom browser iframe onload

【解决方案1】：

正如我在页面上看到的那样，每个 iframe 都有独立的 onload，并且 top-frame onload 不会等待 iframe 触发。

我的网站上有 gif/png 横幅，有时加载速度很慢，所以我将它们放入 iframe 中，这样可以加快整个网站和 onload 事件的工作速度。

【讨论】：

这是不正确的。在大多数情况下，直到 iframe 中的所有内容都完成加载后才会触发 onload 事件。有关详细信息，请参阅以下内容：stevesouders.com/blog/2009/06/03/using-iframes-sparingly

【解决方案2】：

不，它没有。如果你想做这样的事情，你需要为 iframe 添加一个 onload 处理程序。你可以用 jQuery 很好地做到这一点：

  <iframe src="http://digg.com"></iframe>
  <script>
    var count = $('iframe').length;
    $(function() {
      // alert('loaded'); // will show you when the regular body loads
      $('iframe').load(function() {
        count--;
        if (count == 0)
            alert('all frames loaded');
      });
    });
  </script>

这会在所有帧都加载完毕时发出警报。

看例子：

http://jsbin.com/azilo

【讨论】：

+1 我需要这样做。感谢您解决我的问题（关于这个答案，它在 3 年后出现；）。
您提供的示例是使用 jQuery DOMready 事件，而不是 window.load 事件。如果您修改示例，您将看到 window.load 事件在 iframe 中的所有内容加载完毕后才会触发。有关详细信息，请参阅以下内容：stevesouders.com/blog/2009/06/03/using-iframes-sparingly

【解决方案3】：

或者普通的javascript应该可以工作..

function checkIframes() {
   if(!i) { i = 0; }
   if(document.getElementsByTagName('iframe')[i]) {
      document.getElementsByTagName('iframe')[i].onload = function () { i++; checkIframes(); }
   }
   else { yourFunctionInHere(); }
}

还没有真正测试过这个，但应该可以工作......而不是使用document.onload = function() { checkIframes(); }参考它

我不太喜欢 jQuery 之类的库，因为到目前为止，我发现我可以用更少的代码和常规的 javascript 实现更多目标。

【讨论】：

这对我有用，但我需要在检查函数上添加setTimeout 以避免堆栈溢出。