body.onload 是不是等待 IFrame？

Posted 2023-02-21

【中文标题】body.onload 是不是等待 IFrame？

【英文标题】：Does body.onload wait for IFrames?body.onload 是否等待 IFrame？

【发布时间】：2010-10-31 17:23:06

【问题描述】：

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

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

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

【参考方案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 以避免堆栈溢出。