Da das window.onload-Ereignis ausgeführt werden muss, nachdem der gesamte Inhalt der Seite (einschließlich Bilder usw.) geladen wurde, bevorzugen wir oft die Ausführung des Skripts, sobald das DOM geladen ist. Tatsächlich bieten die meisten gängigen Browser (Firefox 3+, Opera 9+, Safari 3+, Chrome 2+) diese Ereignismethode: addDOMLoadEvent.
document.addEventListener("DOMContentLoaded", init, false);
Wie simulieren wir also das addDOMLoadEvent-Ereignis für den IE?
Matthias Miller lieferte zunächst folgende Lösung:
// für Internet Explorer (mit bedingten Kommentaren)
/*@cc_on @*/
/*@if (@_win32)
document.write("");
var script = document.getElementById("__ie_onload");
script.onreadystatechange = function() {
if (this.readyState == "complete") {
init(); // den Onload-Handler aufrufen
}
};
/*@Ende @*/
Diego Perini stellte später eine Lösung bereit, die die Methode doScroll() verwendet, um das Ereignis addDOMLoadEvent zu simulieren. Diese Lösung wird grundsätzlich von gängigen JavaScript-Frameworks (JQuery, YUI usw.) übernommen.
Das Prinzip ist grundsätzlich wie folgt:
Wenn das ondocumentready-Ereignis ausgelöst wird, wurde das Dokument (Dokument) vollständig analysiert und erstellt. Wenn die Komponente die ursprüngliche Dokumentstruktur manipulieren muss, muss danach der Initialisierungscode eingefügt werden. Das ondocumentready-Ereignis teilt der Komponente mit, dass die gesamte Seite geladen wurde und wird unmittelbar vor dem Auslösen des Onload-Ereignisses des ursprünglichen Dokuments ausgelöst.
Einige Methoden, wie z. B. doScroll, erfordern, dass das Originaldokument vollständig geladen ist. Wenn diese Methoden Teil der Initialisierungsfunktion sind, werden sie ausgeführt, wenn das ondocumentready-Ereignis ausgelöst wird.
/*
*
*IEContentLoaded.js
*
* Autor: Diego Perini (diego.perini bei gmail.com) NWBOX Srl
* Zusammenfassung: DOMContentLoaded-Emulation für IE-Browser
* Aktualisiert: 10.05.2007
* Lizenz: GPL/CC
* Version: TBD
*
*/
// @w-Fensterreferenz
// @fn
FunktionsreferenzFunktion IECContentLoaded (w, fn) {
var d = w.document, done = false,
// nur einmal feuern
init = Funktion () {
if (!done) {
erledigt = wahr;
fn();
}
};
// Abfrage, ob keine Fehler vorliegen
(Funktion () {
versuchen {
// löst Fehler aus, bis nach ondocumentready
d.documentElement.doScroll('left');
} fangen (e) {
setTimeout(arguments.callee, 50);
zurückkehren;
}
// keine Fehler, Feuer
init();
})();
// versuche, immer vor dem Laden zu feuern
d.onreadystatechange = function() {
if (d.readyState == 'complete') {
d.onreadystatechange = null;
init();
}
};
}