Sollte ich window.onload oder einen Skriptblock verwenden?

Question

Ich habe eine Javascript-Funktion, die das DOM manipuliert, wenn es aufgerufen wird (CSS-Klassen hinzufügt usw.).Dies wird aufgerufen, wenn der Benutzer einige Werte in einem Formular ändert.Wenn das Dokument zum ersten Mal geladen wird, möchte ich diese Funktion aufrufen, um den Anfangszustand vorzubereiten (was in diesem Fall einfacher ist, als das DOM serverseitig auf den richtigen Anfangszustand einzustellen).

Ist es besser, window.onload zu verwenden, um diese Funktionalität auszuführen, oder einen Skriptblock nach den DOM-Elementen zu haben, die ich ändern muss?Warum ist es in beiden Fällen besser?

Zum Beispiel:

function updateDOM(id) {
    // updates the id element based on form state
}

Soll ich es aufrufen über:

window.onload = function() { updateDOM("myElement"); };

oder:

<div id="myElement">...</div>
<script language="javascript">
    updateDOM("myElement");
</script>

Ersteres scheint die Standardmethode zu sein, aber letzteres scheint genauso gut zu sein, vielleicht sogar besser, da es das Element aktualisiert, sobald das Skript aufgerufen wird, und solange es nach dem Element platziert wird, I sehe darin kein Problem.

Irgendwelche Gedanken?Ist eine Version wirklich besser als die andere?

Answer 1

Auf jeden Fall nutzen onload.Halten Sie Ihre Skripte getrennt von Ihrer Seite, sonst werden Sie verrückt, wenn Sie später versuchen, sie zu entwirren.

Answer 2

Das Onload-Ereignis gilt als die richtige Vorgehensweise, aber wenn Ihnen die Verwendung einer Javascript-Bibliothek nichts ausmacht, ist $(document).ready() von jQuery sogar noch besser.

$(document).ready(function(){
  // manipulate the DOM all you want here
});

Die Vorteile sind:

1. Rufen Sie $(document).ready() so oft auf, wie Sie zusätzlichen Code zur Ausführung registrieren möchten – Sie können window.onload nur einmal festlegen.
2. $(document).ready()-Aktionen werden ausgeführt, sobald das DOM vollständig ist – window.onload muss auf Bilder und dergleichen warten.

Ich hoffe, ich werde nicht der Typ, der bei jeder JavaScript-Frage jQuery vorschlägt, aber es ist wirklich großartig.

Answer 3

Ich habe viel Javascript geschrieben und window.onload ist ein schrecklich Art und Weise, es zu tun.Es ist spröde und wartet bis jeden Das Asset der Seite wurde geladen.Wenn also ein Bild ewig dauert oder eine Ressource erst nach 30 Sekunden abläuft, wird Ihr Code nicht ausgeführt, bevor der Benutzer die Seite sehen/manipulieren kann.

Wenn sich außerdem ein anderer Teil von Javascript für die Verwendung von window.onload = function() {} entscheidet, wird Ihr Code umgehauen.

Der richtige Weg, Ihren Code auszuführen, wenn die Seite fertig ist, besteht darin, zu warten, bis das Element, das Sie ändern müssen, bereit/verfügbar ist.Viele JS-Bibliotheken verfügen über diese integrierte Funktionalität.

Kasse:

• http://docs.jquery.com/Events/ready#fn
• http://developer.yahoo.com/yui/event/#onavailable

Answer 4

Einige JavaScript-Frameworks, wie z mootools, geben Ihnen Zugang zu einem besonderen Event namens „domready“:

Enthält das Fensterereignis „domready“, das ausgeführt wird, wenn das DOM geladen wurde.Um sicherzustellen, dass DOM-Elemente vorhanden sind, wenn der Code ausgeführt wird, der versucht, auf sie zuzugreifen, sollten sie innerhalb des „domready“-Ereignisses platziert werden.

window.addEvent('domready', function() {
  alert("The DOM is ready.");
});

Answer 5

window.onload im IE wartet auch darauf, dass die Binärinformationen geladen werden.Es handelt sich nicht um eine strenge Definition von „wann das DOM geladen wird“.Daher kann es zu einer erheblichen Verzögerung zwischen dem erkannten Zeitpunkt, dass die Seite geladen wird, und dem Auslösen Ihres Skripts kommen.Aus diesem Grund würde ich empfehlen, sich eines der zahlreichen JS-Frameworks (Prototyp/jQuery) anzusehen, um die schwere Arbeit für Sie zu erledigen.

Answer 6

Hier ist ein sehr guter Artikel zu diesem Thema:

http://mattberseth.com/blog/2008/08/when_is_it_safe_to_modify_the.html

Answer 7

@Der Nerd

Ich bin mir ziemlich sicher, dass window.onload erneut aufgerufen wird, wenn ein Benutzer im IE auf die Schaltfläche „Zurück“ klickt, in Firefox jedoch nicht erneut aufgerufen wird.(Es sei denn, sie haben es kürzlich geändert).

In Firefox, onload wird aufgerufen, wenn das DOM vollständig geladen ist, unabhängig davon, wie Sie zu einer Seite navigiert sind.

Answer 8

Obwohl ich mit den anderen darin übereinstimme, wenn möglich window.onload für sauberen Code zu verwenden, bin ich mir ziemlich sicher, dass window.onload erneut aufgerufen wird, wenn ein Benutzer im IE auf die Schaltfläche „Zurück“ klickt, in Firefox jedoch nicht erneut aufgerufen wird.(Es sei denn, sie haben es kürzlich geändert).

Bearbeiten:Ich könnte das verkehrt herum haben.

In manchen Fällen ist die Verwendung von Inline-Skripten erforderlich, wenn Ihr Skript ausgewertet werden soll, wenn der Benutzer von einer anderen Seite aus auf die Schaltfläche „Zurück“ klickt, um zu Ihrer Seite zurückzukehren.

Korrekturen oder Ergänzungen zu dieser Antwort sind willkommen ...Ich bin kein Javascript-Experte.

Answer 9

Meine Meinung ist ersteres, da Sie nur eine window.onload-Funktion haben können, während Inline-Skriptblöcke eine haben N Nummer.

Answer 10

onLoad, weil es viel einfacher ist zu erkennen, welcher Code ausgeführt wird, wenn die Seite geladen wird, als Unmengen von HTML durchzulesen und nach Skript-Tags zu suchen, die ausgeführt werden könnten.