JavaScript onLoad Event

Das JavaScript Event onLoad wird direkt nach dem Laden einer HTML-Datei ausgelöst. Anders als das onClick ist das Event onLoad ausschießlich bei den HTML-Tags BODY und FRAMESET erlaubt. Es kann beispielsweise dazu genutzt werden, per JavaScript erzeugte Elemente zu erzeugen oder zustandsgesteuerte Client-Seitige Scriptbereiche zu initialisieren. Ein Event-Handler für das onLoad Event kann nur direkt im HTML-Code über das entsprechende Tag-Attribut definiert werden. Da das Event direkt nach dem Laden der HTML-Seite, und damit vor der Ausführung anderer Scriptbereiche, ausgelöst wird ist das nachträgliche aktivieren eines Event-Handlers – beispielsweise über einen Aufruf der Form document.getElementsByTagName ('body')[0].onclick = handlerfunktion; – nicht mehr möglich.

JavaScript onLoad Beispiel

Nachfolgend finden Sie ein Beispiel zur Verwendung des onLoad-Events. Dabei wird eine komplette HTML-Datei definiert, die im BODY-Tag mit dem Attribut onload sofort den auszuführenden Event-Handler festlegt. Danach folgt die Definition eines SPAN-Tags mit der ID "status", welches der Ausgabe von Statusmeldungen dienen soll.

Im anschliessenden Script-Bereich werden zwei Funktionen definiert. Aufgabe der ersten Funktion, welches zugleich die Event-Handler-Funktion darstellt, ist es, die Textfarbe zu ändern und den zeitverzögerten Aufruf der weiter unten definierten Funktion einzuleiten. Dazu wird das Objekt Document, genauer gesagt die dem Objekt zugehörige Methode document.getElementById(), verwendet um das Element zu selektieren. Über den so ermittelten Objekt-Verweis wird dann die Schriftfarbe des Elements auf rot geändert. Am Ende der Funktion wird mit Hilfe der Methode window.setTimeout(), einer Methode des Window-Objekts, der zeitverzögerte Aufruf der Funktion statusAendern eingeleitet.

Die Funktion statusAendern ändert den Text im HTML-Element mit der ID "status" und passt mit Hilfe des vordefinierten JavaScript-Objekts Style die Schriftfarbe an. Auch hier wird das Element wieder über seine ID ermittelt. Eine Demonstration des unten stehenden Scripts können Sie sich auf der Seite onLoad Event Demo anschauen. 

<html>
  <!-- onLoad-Event mit einer Event-Handler-Funktion belegen -->
  <body onload="starten()">
    <!-- Definition eines Statusfeldes, welches der Ausgabe des derzeitigen Status dient -->
    <span id="status">bitte warten...</span>  
    <script language="javascript" type="text/javascript">
    <!-- // JavaScript-Bereich für ältere Browser auskommentieren
    // Die Funktion starten wird direkt nach dem Laden des HTML-Dokuments aufgerufen.
    // Sie setzt die Schriftfarbe des Statuselements auf rot und startet
    // die Funktion statusAendern mit einer zeitlichen Verzögerung von 3 Sekunden.
    function starten () {
      // Schriftfarbe per Style-Objekt auf rot setzen...
      document.getElementById ('status').style.color = 'red';
      // und nach drei Sekunden die Funktion statusAendern starten.
      window.setTimeout ('statusAendern ()', 3 * 1000);
    }

    // Die nächste Funktion weist dem Inhalt des Statuselements die
    // Zeichenkette fertig zu und ändert die Schriftfarbe des Elements
    // auf grün.
    function statusAendern () {
      // Text im Status-Element auf fertig ändern...
      document.getElementById ('status').firstChild.data = 'Fertig!';
      // und danach die Schriftfarbe dieses Elements auf grün
      // setzen.
      document.getElementById ('status').style.color = 'green';
    }
    // -->
    </script>
  </body>
</html>
Letzte Posts aus unserem Forum

Script Schrift vergrößern

Hallo wollte gerade das Script für die Schriftvergrößerung testen, aber irgendwie bekomme ich das nicht hin. Habe eine Joomla Website und dort die ... » mehr

von Gast am Donnerstag, 22. April 2010 13:32 in JavaScript - bisher 1 Antwort
Letzter Beitrag: Donnerstag, 22. April 2010 18:05 von alm

Hallo, damit kann man nicht allzu viel anfangen. Soviel ich weiss kann es zuweilen Probleme mit Tabellen-Layouts geben. Dort werden die ... » mehr

Javascript Schriftengröße: Problem bei URL-Übergabe im IE8

Hallo, ich hab eben das Javascript zur Schriftengröße eingebaut, klappt auch wunderbar auf Firefox, aber der IE 8 hat folgendes Problem: - wenn ich ... » mehr

von horst1234 am Dienstag, 23. Februar 2010 13:06 in JavaScript - bisher 1 Antwort
Letzter Beitrag: Dienstag, 23. Februar 2010 14:07 von horst1234

Ich hab das charset im Header geändert (wie in der beispiel.html), und schon klappt es ... » mehr

Dynamisches einfügen von Zeilen in eine Spalte

Hallo, ich möchte gerne eine Zeile zwischen zwei andere Zeilen einfügen. Leider klappt folgender Versuch noch nicht so richtig. Vielleicht kann mir ... » mehr

von Bluecaspar am Mittwoch, 10. Februar 2010 18:09 in JavaScript - bisher 2 Antworten
Letzter Beitrag: Donnerstag, 11. Februar 2010 10:37 von Bluecaspar

Ja genau, das war der Fehler. Vielen Dank Alex. Hier der korrigierte Code: <html> <head> <title> Test ... » mehr

Fenster in Frame erzeugen

Hallo, ich würde gerne ein Fenster in einer Webseite erzeugen. Das Fenster sollte dabei auf ein Frame begrenzt sein, sich also nicht aus diesen ... » mehr

von Bluecaspar am Dienstag, 9. Februar 2010 13:57 in JavaScript - bisher 2 Antworten
Letzter Beitrag: Mittwoch, 10. Februar 2010 09:32 von Bluecaspar

Ja hervorragend, dass ist genau das was ich möchte. Danke ... » mehr

Problem: Kombination mit Lightbox 2

Hallo, ich bin gerade dabei die Galerie mit der Lightbox 2 zu verknüpfen, da ich die Bilder im Vollformat gerne in diesem schicken aufpoppenden ... » mehr

von GoPeter am Montag, 16. November 2009 23:38 in JavaScript - bisher 16 Antworten
Letzter Beitrag: Mittwoch, 18. November 2009 00:32 von GoPeter

Soo...hat lange gedauert...aber jetzt ist es endlich ... » mehr

¬ Menu

¬ Gratis Download

¬ Seminare



¬ Yoga

¬ Insolvenzrecht