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 onload
funktionieren 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).
quelle
document.readyState
Eigenschaft kann verwendet werden, obwohl ich nicht sicher bin, ob der Browser kompatibel ist ...Antworten:
Mit der
document.readyState
Eigenschaft kann überprüft werden, ob das Dokument bereit ist. Von MDN: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! }); }
quelle
addEventListener()
mit IE9 hinzugefügt wurde, das für Windows XP nicht verfügbar istload
anstatt hörenonload
?Firefox-, Opera- und Webkit-basierte Browser verfügen über ein Ereignis auf Dokumentebene, auf
DOMContentLoaded
das Sie warten könnendocument.addEventListener("DOMContentLoaded", fn, false)
.Im IE ist es komplizierter. Im IE überwacht jQuery
onreadystatechange
das 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(); } } },
quelle
if ( document.readyState === "complete" ) {
sie beginnen, damit sie den Fall behandeln können, in dem das Dokument bereits fertig ist. Wenn Sie dazu Ihr eigenes Mini-Framework erstellen, müssen Sie diese Art von Funktionalität selbst einbauen.Wenn es in Ordnung
document.readyState
ist, 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); })();
quelle
document.readyState
ist die Antwort auf meine Probleme. Wie ich bereits mehrfach erwähnt habe, ist das Anhängen an ein "DOMReady" -Ereignis kein Problem. Das Problem ist, wenn der readyState == abgeschlossen ist, sodass das DOMReady-Ereignis niemals ausgelöst wird.document.readyState
sowieso darauf verlassen (dh Sie möchten keine älteren Nicht-IE-Browser unterstützen), überhaupt kein browserspezifischer Code erforderlich ist (DOMContentLoaded
vs.onload
vs.onreadystatechange
,addEventListener
vsattachEvent
). - Die obige Lösung funktioniert überallDies 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)
quelle
Das
DOMContentLoaded
Ereignis 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ßendocument.addEventListener("DOMContentLoaded", function(event) { console.log("DOM fully loaded and parsed"); }
quelle
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/
quelle