html - body.onload 是否等待 IFrame？

Question

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

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

另外，请让我知道浏览器之间的行为是否有所不同。

Answer 1

不，它没有。如果你想做这样的事情，你需要为 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

Answer 2

或者普通的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 实现更多目标。

Answer 3

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

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