819

どちらがより広くサポートされていますか:window.onloadまたはdocument.onload?

4

10 に答える 10

835

彼らはいつ発砲しますか？

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:

overの使用法に関して、同様の質問がコーディング フォーラムでしばらく前に行われました。その結果、構造とアクションを分離するのが良いので、使用する必要があるように思われました。window.onloadbody.onloadwindow.onload

于 2009-02-25T21:46:45.787 に答える
299

一般的な考え方は、ドキュメントのウィンドウがプレゼンテーションの準備ができたときにwindow.onload が起動し、 (ドキュメント内のマークアップ コードから構築された) DOM ツリーが完成したときにdocument.onload が起動するというものです。

理想的には、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内で宣言された場合は 2 回、 内で宣言された<body>場合は 1 回発生します<head>(イベントは として機能しますdocument.onload)。
  • カウンターの状態に依存するカウントと動作により、両方のイベント動作をエミュレートできます。
  • または、HTML要素window.onloadの範囲内でイベント ハンドラーを宣言します。<head>

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

上記のコードは、このプロジェクトのコードベース (index.htmlおよびkeyboarder.js) から取得したものです。

window オブジェクトのイベント ハンドラーの一覧については、MDN のドキュメントを参照してください。

于 2011-09-10T12:05:03.700 に答える
201

イベントリスナーを追加

<script type="text/javascript">
  document.addEventListener("DOMContentLoaded", function(event) {
      /* 
        - Code to execute when only the HTML document is loaded.
        - This doesn't wait for stylesheets, 
          images, and subframes to finish loading. 
      */
  });
</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')
})
幸運を。
于 2016-06-28T11:57:27.233 に答える
14

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」しか表示されません。window.onload.toString()IE と FF のコンソールで" " を実行すると、次のように表示されます。

「関数 onload(イベント) { bodyOnloadHandler() }」

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

于 2015-01-26T04:08:11.900 に答える
9

window.onloadandはandonunloadへのショートカットですdocument.body.onloaddocument.body.onunload

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

' onload' ドキュメント内 -> true

于 2014-06-12T00:21:39.993 に答える
5

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

于 2009-02-25T21:47:20.980 に答える
1

Window.onload が標準ですが、PS3 (Netfront ベース) の Web ブラウザーは window オブジェクトをサポートしていないため、使用できません。

于 2010-05-19T11:31:31.350 に答える