onload-Ereignis

DOM-Events Event-Objekt

Definition und Verwendung

Das onload-Ereignis tritt auf, wenn ein Objekt geladen wird.

onload wird am häufigsten im <body>-Element verwendet, um Skripte auszuführen, nachdem die Webseite alle Inhalte vollständig geladen hat (einschließlich Bilder, Skriptdateien, CSS-Dateien usw.).

Das onload-Ereignis kann verwendet werden, um den Browser-Typ und die Browser-Version des Besuchers zu überprüfen und die richtige Version der Webseite basierend auf diesen Informationen zu laden.

Das onload-Ereignis kann auch zum Verarbeiten von Cookies verwendet werden (siehe weitere Beispiele unten).

Beispiel

Führen Sie JavaScript sofort nach dem Laden der Seite aus:

<body onload="myFunction()">

Versuchen Sie es selbst

Beispiel 2

Verwenden Sie onload im <img>-Element. Nach dem Laden des Bildes wird sofort eine Erinnerung "Bild ist geladen" ausgegeben:

<img src="w3javascript.gif" onload="loadImage()" width="100" height="132">
<script>
function loadImage() {
  alert("Bild ist geladen");
}
</script>

Versuchen Sie es selbst

Beispiel 3

Verwenden Sie das onload-Ereignis, um Cookies zu verarbeiten:

<body onload="checkCookies()">
<script>
function checkCookies() {
  var text = "";
  if (navigator.cookieEnabled == true) {
    text = "Cookies sind aktiviert.";
  } else {
     text = "Cookies sind nicht aktiviert.";
  }
  document.getElementById("demo").innerHTML = text;
}
</script>

Versuchen Sie es selbst

Syntax

In HTML:

<element onload="myScript">

Versuchen Sie es selbst

In JavaScript:

object.onload = function(){myScript};

Versuchen Sie es selbst

In JavaScript verwenden Sie die Methode addEventListener():

object.addEventListener("load", myScript);

Versuchen Sie es selbst

Anmerkung:Internet Explorer 8 oder frühere Versionen unterstützen dies nicht addEventListener() Methode.

Technische Details

Blasen: nicht unterstützt
abbrechbar: nicht unterstützt
Eventtyp: wenn sie aus der Benutzeroberfläche generiert wurde,UiEvent. Ansonsten Event.
Unterstützte HTML-Tags: <body>, <frame>, <iframe>, <img>, <input type="image">, <link>, <script>, <style>
DOM-Version: Level 2 Ereignisse

Browserunterstützung

Ereignisse Chrome IE Firefox Safari Opera
onload Unterstützung Unterstützung Unterstützung Unterstützung Unterstützung
DOM-Events Event-Objekt