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事件更快地运行。

body.onload会等待IFrame吗？

3 个答案: