Wie kann ich überprüfen, ob DOM ohne Framework bereit ist?

Die Frage ist so wie eine Unmenge anderer hier und im Internet - Wie kann man überprüfen, ob DOM in Javascript geladen wurde? Aber hier ist der Haken:

• Ohne ein Framework wie jQuery usw.;
• Ohne zu wissen, ob Ihr Skript über ein statisch platziertes <script>Tag oder über ein anderes Javascript viel später geladen wurde, nachdem das DOM bereits geladen wurde.

Kann dies mehr oder weniger zuverlässig und browserübergreifend erfolgen?

Hinzugefügt: Lassen Sie mich klarstellen: Ich schreibe eine eigenständige JS-Datei, die in beliebige Webseiten aufgenommen werden kann. Ich möchte Code ausführen, nachdem das DOM geladen wurde. Aber ich weiß nicht , WIE mein Skript aufgenommen werden. Dies kann durch Platzieren eines <script>Tags geschehen (in diesem Fall onloadfunktionieren die herkömmlichen Lösungen oder Lösungen für die DOM-Bereitschaft). oder es könnte über AJAX oder ein anderes Mittel geladen werden, viel später, nachdem das DOM bereits geladen wurde (so dass die zuvor erwähnten Lösungen niemals ausgelöst werden).

Mit der document.readyStateEigenschaft kann überprüft werden, ob das Dokument bereit ist. Von MDN:

Werte

Der readyState eines Dokuments kann einer der folgenden sein:

• Laden - Das Dokument wird noch geladen.
• interaktiv - Das Dokument wurde vollständig geladen und das Dokument wurde analysiert, aber Unterressourcen wie Bilder, Stylesheets und Frames werden noch geladen.
• vollständig - Das Dokument und alle Unterressourcen wurden vollständig geladen. Der Status zeigt an, dass das Ladeereignis ausgelöst wird.

Codebeispiel:

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

Firefox-, Opera- und Webkit-basierte Browser verfügen über ein Ereignis auf Dokumentebene, auf DOMContentLoadeddas Sie warten können document.addEventListener("DOMContentLoaded", fn, false).

Im IE ist es komplizierter. Im IE überwacht jQuery onreadystatechangedas Dokumentobjekt auf einen bestimmten Readystate mit einer Sicherung des Ereignisses document.onload. document.onload wird später ausgelöst, als das DOM bereit ist (nur wenn alle Bilder vollständig geladen wurden), sodass es nur als Backstop verwendet wird, wenn die früheren Ereignisse aus irgendeinem Grund nicht funktionieren.

Wenn Sie einige Zeit mit Googeln verbringen, finden Sie Code, um dies zu tun. Ich denke, der am besten überprüfte Code dafür ist in den großen Frameworks wie jQuery und YUI. Selbst wenn ich dieses Framework nicht verwende, suche ich in ihrem Quellcode nach Techniken.

Hier ist der Hauptteil der jQuery 1.6.2-Quelle für 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();
        }
    }
},

Wenn es in Ordnung document.readyStateist, sich auf eine schnelle und schmutzige Lösung mit Abfragen zu verlassen:

(function() {
    var state = document.readyState;
    if(state === 'interactive' || state === 'complete') {
        // do stuff
    }
    else setTimeout(arguments.callee, 100);
})();

Dies funktioniert für alle Browser und ist kurz und prägnant:

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

if ( !!(window.addEventListener) )
  window.addEventListener("DOMContentLoaded", execute)
else // MSIE
  window.attachEvent("onload", execute)

Das DOMContentLoadedEreignis wird ausgelöst, wenn das ursprüngliche HTML-Dokument vollständig geladen und analysiert wurde, ohne darauf zu warten, dass Stylesheets, Bilder und Subframes vollständig geladen werden. Gut, Chrome, Firefox, IE9, Oper und Safari unterstützen es gleichermaßen

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

ANMERKUNG: Internet Explorer 8 unterstützt das Ereignis readystatechange, mit dem erkannt werden kann, wann das DOM bereit ist.

Hier ist eine Möglichkeit, indem Sie das Skript unten auf der Seite ausführen. Darüber hinaus können Sie mithilfe von window.onload warten, bis alle Bilder / Skripte geladen sind. Oder Sie können einfach den Code unten platzieren, ohne darauf zu warten, dass Bilder geladen werden.

<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>

Bearbeitet: für Vilx 'Kommentar

Viele Onload-Bindungen hier sind ein Beispiel http://jsfiddle.net/uTF2N/3/