web-dev-qa-db-ja.com

window.onloadとdocument.onload

window.onloadとdocument.onloadのどちらがより広くサポートされていますか？

javascriptjavascript-events
591
Chris Ballance

window.onload

いつ発砲するの？

window.onload

  • デフォルトでは、コンテンツ（画像、CSS、スクリプトなど）を含むページ全体が読み込まれると起動されます。
  • 一部のブラウザではdocument.onloadの役割を引き継ぎ、DOMの準備が整うと起動します。

document.onload

  • DOMの準備が整ったときに呼び出され、画像やその他の外部コンテンツが読み込まれる前に呼び出される可能性があります。

どの程度サポートされていますか？

window.onloadが最も広くサポートされているようです。実際、最新のブラウザの中にはある意味でdocument.onloadをwindow.onloadに置き換えているものがあります。多くの人が jQuery などのライブラリを使用して、ドキュメントの準備が整っているかどうかを確認しているのは、ブラウザサポートの問題が原因と考えられます。

$(document).ready(function() { /* code here */ });
$(function() { /* code here */ });

歴史のために：

window.onloadとbody.onload

注意として、 codingforumswindow.onloadの上でのbody.onloadの使用法について、しばらく前に同じ質問がされました。結果は、あなたが window.onload を使うべきであるように思われました。なぜならそれはあなたの構造をアクションから切り離すのが良いからです。

604
Josh Mein

一般的な考えは、window.onload firesドキュメントのウィンドウが[ready for presentationの場合、およびdocument.onload firesの場合DOM tree（ドキュメント内のマークアップコードから構築）はcompletedです。

理想的には、 DOMツリーイベント にサブスクライブすると、JavaScriptを介したオフスクリーン操作が可能になり、ほとんどCPU負荷なしが発生します。反対に、window.onloadは、複数の外部リソースがまだ要求、解析、およびロードされていない場合、起動にしばらく時間がかかりますが可能です。

►テストシナリオ：

違いとブラウザの使い方選択肢実装前述のイベントハンドラを確認するには、次のコードをドキュメントの-<body>-タグに挿入します。

<script language="javascript">
window.tdiff = []; fred = function(a,b){return a-b;};
window.document.onload = function(e){ 
    console.log("document.onload", e, Date.now() ,window.tdiff,  
    (window.tdiff[0] = Date.now()) && window.tdiff.reduce(fred) ); 
}
window.onload = function(e){ 
    console.log("window.onload", e, Date.now() ,window.tdiff, 
    (window.tdiff[1] = Date.now()) && window.tdiff.reduce(fred) ); 
}
</script>

►結果：

Chrome v20（およびおそらくほとんどの最新ブラウザー）で観察可能な結果の動作を次に示します。

  • document.onloadイベントはありません。
  • onloadは、<body>内で宣言されると2回、<head>内で宣言されると1回発生します（イベントはdocument.onloadとして機能します）。
  • カウンタの状態に応じてカウントと動作を行うと、両方のイベント動作をエミュレートできます。
  • または、HTML -window.onload要素の範囲内で<head>イベントハンドラーを宣言します。

►サンプルプロジェクト：

上記のコードは このプロジェクトのもの codebase（index.htmlおよびkeyboarder.js）から取得されています。

ウィンドウオブジェクトのイベントハンドラ のリストについては、MDNのドキュメントを参照してください。

256
Lorenz Lo Sauer

イベントリスナを追加します 

<script type="text/javascript">
  document.addEventListener("DOMContentLoaded", function(event) {
      // - Code to execute when all DOM content is loaded. 
      // - including fonts, images, etc.
  });
</script>

Update March 2017

1バニラJavaScript

window.addEventListener('load', function() {
    console.log('All assets are loaded')
})

2 jQuery

$(window).on('load', function() {
    console.log('All assets are loaded')
})
87
Akash

HTML文書の解析 - 終わり によれば、

  1. ブラウザはHTMLソースを解析し、遅延スクリプトを実行します。

  2. すべてのHTMLが解析されて実行されると、DOMContentLoadedがdocumentに送出されます。イベントはwindowにバブルします。

  3. ブラウザは、読み込みイベントを遅らせるリソース（画像など）を読み込みます。

  4. loadイベントはwindowに送出されます。

したがって、実行順序は次のようになります。

  1. キャプチャ段階でのDOMContentLoadedのwindowイベントリスナ
  2. DOMContentLoadedのdocumentイベントリスナー
  3. バブル段階におけるDOMContentLoadedのwindowイベントリスナー
  4. loadのonloadイベントリスナ（windowイベントハンドラを含む）

load内のバブルonloadイベントリスナ（documentイベントハンドラを含む）は決して呼び出されるべきではありません。 キャプチャloadリスナーのみが呼び出されるかもしれませんが、スタイルシートのようなサブリソースのロードによるもので、ドキュメント自体のロードによるものではありません。

window.addEventListener('DOMContentLoaded', function() {
  console.log('window - DOMContentLoaded - capture'); // 1st
}, true);
document.addEventListener('DOMContentLoaded', function() {
  console.log('document - DOMContentLoaded - capture'); // 2nd
}, true);
document.addEventListener('DOMContentLoaded', function() {
  console.log('document - DOMContentLoaded - bubble'); // 2nd
});
window.addEventListener('DOMContentLoaded', function() {
  console.log('window - DOMContentLoaded - bubble'); // 3rd
});

window.addEventListener('load', function() {
  console.log('window - load - capture'); // 4th
}, true);
document.addEventListener('load', function(e) {
  /* Filter out load events not related to the document */
  if(['style','script'].indexOf(e.target.tagName.toLowerCase()) < 0)
    console.log('document - load - capture'); // DOES NOT HAPPEN
}, true);
document.addEventListener('load', function() {
  console.log('document - load - bubble'); // DOES NOT HAPPEN
});
window.addEventListener('load', function() {
  console.log('window - load - bubble'); // 4th
});

window.onload = function() {
  console.log('window - onload'); // 4th
};
document.onload = function() {
  console.log('document - onload'); // DOES NOT HAPPEN
};
62
Oriol

Chromeでは、window.onloadは<body onload="">とは異なりますが、Firefox（バージョン35.0）とIE（バージョン11）の両方で同じです。

次のスニペットでそれを探ることができます。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <!--import css here-->
        <!--import js scripts here-->

        <script language="javascript">

            function bodyOnloadHandler() {
                console.log("body onload");
            }

            window.onload = function(e) {
                console.log("window loaded");
            };
        </script>
    </head>

    <body onload="bodyOnloadHandler()">

        Page contents go here.

    </body>
</html>

そして、Chromeコンソールには "window loaded"（最初に来る）と "body onload"の両方が表示されます。ただし、FirefoxとIEでは、単に「body onload」と表示されます。 IE＆FFのコンソールで "window.onload.toString()"を実行すると、次のようになります。

"function onload（event）{bodyOnloadHandler（）}"

これは、割り当て "window.onload = function（e）..."が上書きされることを意味します。

12
VincentZHANG

window.onloadしかし、それらはしばしば同じものです。同様に、body.onloadはIEではwindow.onloadになります。

5
AnthonyWJones

window.onloadとonunloadは、document.body.onloadとdocument.body.onunloadへのショートカットです。

すべてのHTMLタグのdocument.onloadおよびonloadハンドラーは予約されているようですが、トリガーされません

文書内の 'onload' - > true

5
garaboncias

ただし、Window.onloadが標準です - PS3のWebブラウザ（Netfrontベース）はウィンドウオブジェクトをサポートしていないため、そこで使用することはできません。

1
gotofritz