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を取得し、トップフレームのonloadはiframeが起動するのを待ちません。

自分のサイトでgif/pngバナーを取得したのですが、読み込みが非常に遅いことがあるので、それらをiframeに入れて、サイト全体とonloadイベントの動作を高速化しました。