[解決済み] フレームワークなしでDOMが準備できたかどうかを確認するには？

質問

この質問は、他の多くの質問と同じように、Javascript で DOM がロードされたかどうかをチェックする方法です。しかし、ここが問題です。

• jQuery などのフレームワークを使用しないでください。
• スクリプトが静的に配置された <script> タグで読み込まれたのか、それとも DOM が既に読み込まれた後に他の Javascript で読み込まれたのか、知る由もありません。

これは、多かれ少なかれ確実に、クロスブラウザの互換性で行うことができるでしょうか？

追加しました。 私は、任意のウェブページに含めることができるスタンドアロン.JSファイルを書いています。私はコードを実行したいです 後 を実行したいのですが、DOM がロードされた後、 HOW で、私のスクリプトが含まれることになります。それは <script> タグを置くことです (この場合、従来の onload や DOM-readiness ソリューションが機能する）、あるいは AJAX やその他の手段で読み込まれ、DOM がすでに読み込まれたずっと後に読み込まれる（したがって前述のソリューションは決して機能しない）可能性があります。

どのように解決するのですか?

この document.readyState プロパティは、文書の準備ができたかどうかを確認するために使用することができます。MDNより。

値

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

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

コード例です。

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!
    });
}