85

質問は、ここやWeb上の無数の他の人のようです-DOMがJavascriptにロードされているかどうかを確認する方法は？しかし、ここに問題があります。

  • jQueryなどのフレームワークを使用せずに;
  • スクリプトが静的に配置された<script>タグを介してロードされたのか、それともDOMが既にロードされた後、他のJavascriptを介してロードされたのかがわかりません。

これは、多かれ少なかれ確実に、ブラウザー間の互換性を使用して実行できますか？

追加：明確にしておきます：私は任意のWebページに含めることができるスタンドアロンの.JSファイルを書いています。DOMがロードされた後にコードを実行したい。しかし、私のスクリプトがどのように含まれるのかわかりません。<script>タグを配置することで可能性があります（この場合、従来onloadのソリューションまたはDOM対応ソリューションが機能します）。または、DOMが既にロードされた後、AJAXまたはその他の手段でロードすることもできます（したがって、前述のソリューションは起動しません）。

4

6 に答える 6

100

このdocument.readyStateプロパティを使用して、ドキュメントの準備ができているかどうかを確認できます。MDNから：

値

ドキュメントのreadyStateは、次のいずれかになります。

  • 読み込み中–ドキュメントはまだ読み込み中です。
  • インタラクティブ–ドキュメントの読み込みが完了し、ドキュメントが解析されましたが、画像、スタイルシート、フレームなどのサブリソースはまだ読み込まれています。
  • 完了–ドキュメントとすべてのサブリソースの読み込みが完了しました。この状態は、loadイベントが発生しようとしていることを示しています。

コード例：

if(document.readyState === "complete") {
    // Fully loaded!
}
else if(document.readyState === "interactive") {
    // DOM ready! Images, frames, and other subresources are still downloading.
}
else {
    // Loading still in progress.
    // To wait for it to complete, add "DOMContentLoaded" or "load" listeners.

    window.addEventListener("DOMContentLoaded", () => {
        // DOM ready! Images, frames, and other subresources are still downloading.
    });

    window.addEventListener("load", () => {
        // Fully loaded!
    });
}
于 2011-11-11T22:54:15.257 に答える
10

Firefox、Opera、およびWebkitベースのブラウザには、でDOMContentLoadedリッスンできるドキュメントレベルのイベントがありますdocument.addEventListener("DOMContentLoaded", fn, false)。

IEではもっと複雑です。IEでjQueryが行うことonreadystatechangeは、document.onloadイベントのバックアップを使用して特定のreadystateをドキュメントオブジェクトで監視することです。document.onloadは、DOMの準備が整うよりも遅く起動するため（すべてのイメージの読み込みが完了した場合のみ）、以前のイベントが何らかの理由で機能しない場合のバックストップとしてのみ使用されます。

グーグルに時間を費やすと、これを行うためのコードが見つかります。これを行うための最も精査されたコードはjQueryやYUIのような大きなフレームワークにあると思うので、そのフレームワークを使用していなくても、それらのソースコードでテクニックを調べます。

jQuery1.6.2のソースの主要部分は次のdocument.ready()とおりです。

bindReady: function() {
    if ( readyList ) {
        return;
    }

    readyList = jQuery._Deferred();

    // Catch cases where $(document).ready() is called after the
    // browser event has already occurred.
    if ( document.readyState === "complete" ) {
        // Handle it asynchronously to allow scripts the opportunity to delay ready
        return setTimeout( jQuery.ready, 1 );
    }

    // Mozilla, Opera and webkit nightlies currently support this event
    if ( document.addEventListener ) {
        // Use the handy event callback
        document.addEventListener( "DOMContentLoaded", DOMContentLoaded, false );

        // A fallback to window.onload, that will always work
        window.addEventListener( "load", jQuery.ready, false );

    // If IE event model is used
    } else if ( document.attachEvent ) {
        // ensure firing before onload,
        // maybe late but safe also for iframes
        document.attachEvent( "onreadystatechange", DOMContentLoaded );

        // A fallback to window.onload, that will always work
        window.attachEvent( "onload", jQuery.ready );

        // If IE and not a frame
        // continually check to see if the document is ready
        var toplevel = false;

        try {
            toplevel = window.frameElement == null;
        } catch(e) {}

        if ( document.documentElement.doScroll && toplevel ) {
            doScrollCheck();
        }
    }
},
于 2011-11-11T22:21:08.860 に答える
9

依存することが問題ない場合document.readyStateは、ポーリングを使用した迅速で汚い解決策：

(function() {
    var state = document.readyState;
    if(state === 'interactive' || state === 'complete') {
        // do stuff
    }
    else setTimeout(arguments.callee, 100);
})();
于 2011-11-11T23:22:36.003 に答える
9

これはすべてのブラウザで機能し、短く簡潔です。

var execute = function () {
  alert("executing code");  
};

if ( !!(window.addEventListener) )
  window.addEventListener("DOMContentLoaded", execute)
else // MSIE
  window.attachEvent("onload", execute)
于 2013-04-24T15:50:01.957 に答える
5

このDOMContentLoadedイベントは、スタイルシート、画像、サブフレームの読み込みが完了するのを待たずに、最初のHTMLドキュメントが完全に読み込まれて解析されたときに発生します。良い点は、chrome、firefox、IE9、opera、safariが同等にサポートしていることです。

document.addEventListener("DOMContentLoaded", function(event) 
{
    console.log("DOM fully loaded and parsed");
}

注：Internet Explorer 8は、DOMの準備ができたことを検出するために使用できるreadystatechangeイベントをサポートしています。

于 2016-05-29T10:25:14.157 に答える
3

これは、ページの下部にあるスクリプトを実行する1つの方法です。さらに、window.onloadを使用すると、すべての画像/スクリプトが読み込まれるのを待つことができます。または、画像が読み込まれるのを待たずに、コードを下部に配置することもできます。

<html>
<head>
</head>
<body>
</body>
<script language="text/javascript">
  window.onload = (function (oldOnLoad) {
    return function () {
      if (oldOnLoad) { 
        olOnLoad();  //fire old Onload event that was attached if any.
      }
      // your code to run after images/scripts are loaded
    }
  })(window.onload);

  // your code to run after DOM is loaded
</script>
</html>

編集：Vilxのコメント用

ここでの多くのonloadバインディングは、http：//jsfiddle.net/uTF2N/3/の例です。

于 2011-11-11T22:13:14.647 に答える