In JavaScript, wenn ich ein Skript einmal ausführen möchte, wenn die Seite geladen wurde, sollte ich window.onload verwenden oder einfach das Skript schreiben?Wann "window.onload" verwenden?
Zum Beispiel, wenn ich ein Pop-up haben will, sollte ich schreiben (direkt im <script> Tag):
alert("hello!");
Oder:
window.onload = function() {
alert("hello!");
}
Beide scheinen nur nachlaufen Die Seite ist geladen. Was ist der Unterschied?
Die erste läuft nur, wenn der Browser dazu kommt.
Der zweite wartet darauf, dass das Fenster geladen wird, bevor es ausgeführt wird.
Im Allgemeinen sollten Sie die zweite durchführen, aber Sie sollten einen Ereignis-Listener anhängen, anstatt die Funktion zu definieren. Zum Beispiel:
window.addEventListener('load',
function() {
alert('hello!');
}, false);
Das hängt davon ab, ob es ausgeführt werden soll, wenn das Skriptelement gefunden wird oder wenn es ausgeführt werden soll, wenn das Load-Ereignis ausgelöst wird (nachdem das gesamte Dokument (einschließlich solcher Dinge wie Bilder) geladen wurde).
Weder ist immer richtig.
Im Allgemeinen würde ich jedoch vermeiden, Funktionen onload direkt zugunsten der Verwendung von addEventListener zuzuordnen (mit Kompatibilitätsbibliotheken, wenn ich ältere Browser unterstützen musste).
Hier ist die documentation on MDN.
Nach es:
Die Last-Ereignis ausgelöst am Ende des Dokuments Ladevorgangs. Zu diesem Zeitpunkt befinden sich alle Objekte im Dokument im DOM und alle Bilder und Unterrahmen sind fertig geladen.
Ihr erster Codeschnipsel wird ausgeführt, sobald der Browser diesen Punkt in HTML erreicht.
Der zweite Snippet wird ein Popup auslösen, wenn das DOM und alle Bilder vollständig geladen sind (siehe Spezifikationen).
In Anbetracht der alert() Funktion ist es nicht wirklich wichtig, an welchem Punkt es ausgeführt wird (es hängt nicht von irgendetwas außer window Objekt ab). Aber wenn Sie die DOM manipulieren wollen - sollten Sie auf jeden Fall warten, bis sie richtig geladen ist.
Der Grund für das Warten auf das Laden des DOM ist, dass Sie auf alle Elemente abzielen können, die nach dem Skript geladen werden. Wenn Sie nur eine alert erstellen, spielt es keine Rolle. Angenommen, Sie haben ein Targeting auf div ausgeführt, das nach dem Skript in Ihrem Markup enthalten war. Sie erhalten einen Fehler, wenn Sie nicht warten, bis das Stück des zu ladenden DOM-Baums geladen ist.
document.ready ist eine gute Alternative zu window.onload, wenn Sie jQuery verwenden.
Siehe hier: window.onload vs $(document).ready()
Sie drei Alternativen haben:
direkt im Script-Tag läuft, sobald es analysiert wird.
Inside document.addEventListener("DOMContentLoaded", function(){}); wird es ausführen, sobald das DOM bereit ist.
Inside window.onload function(){}) wird ausgeführt, sobald alle Seitenressourcen geladen sind.
Die anderen Antworten scheinen alle veralten
Zunächst einmal, Skripte an der Spitze setzen und window.onload mit einem Anti-Muster. Es ist bestenfalls von IE Tagen übrig geblieben oder im schlimmsten Fall von JavaScript und dem Browser.
Sie können nur Ihre Skripte, die die Unterseite des html
<html>
<head>
<title>My Page</title>
</head>
<body>
content
</body>
<script src="some-external.js"></script>
<script>
some in page code
</script>
</html>
Der einzige Grund, warum Menschen window.onload verwendet bewegen, weil sie fälschlicherweise benötigt geglaubt Skripte im head Abschnitt zu gehen. Da die Dinge in der Reihenfolge ausgeführt werden, wenn sich Ihr Skript im Kopfbereich befand, existierten der Hauptteil und Ihr Inhalt noch nicht per Definition von in der Reihenfolge.
Die hacky Abhilfe bestand darin, window.onload zu verwenden, um auf den Rest der Seite zu warten, um zu laden. Das Verschieben des Skripts nach unten hat dieses Problem ebenfalls gelöst, und jetzt müssen Sie window.onload nicht mehr verwenden, da Ihr Text und Inhalt bereits geladen wurde.
Die modernere Lösung ist die Verwendung des Tags defer in Ihren Skripten, aber damit Ihre Skripte alle extern sein müssen.
<head>
<script src="some-external.js" defer></script>
<script src="some-other-external.js" defer></script>
</head>
Dies hat den Vorteil, dass der Browser sofort den Skripte Download wird gestartet, und es wird sie in der angegebenen Reihenfolge ausgeführt werden, aber es wird wartet sie, bis ausgeführt werden, nachdem die Seite geladen wird, keine Notwendigkeit für window.onload oder besser aber immer noch nicht benötigt window.addEventListener('load', ...
Wow, diese Frage ist alt! Danke für den Tipp über 'Defer'. Ich habe es gesehen, aber nie realisiert, was es bedeutet. –
ja gut, es ist das erste Ergebnis beim googeln über wann 'window.onload' zu verwenden, so dass es schien, dass es eine aktualisierte Antwort benötigt – gman
@xgqfrms [jQuery ist nicht immer die Antwort] (http://meta.stackoverflow.com/questions/335328/when-isuse-jquery-not-a-valid-answer-to-to- a-javascript-question) ... –