CSS, HTML und Javascript mit {stil}

Javascript onload / onunload • Fenster oder Frame geladen / verlassen

Javascript onclick – Klick mit der Maus und Finger-Touch

Javascript onload feuert, wenn der Browser das HTML-Dokument oder iframes in einem Fenster geladen hat. Das Laden bezieht alle Skripte, Grafiken, Plugins und Stylesheets ein.

DOMContentLoaded feuert, sobald das HTML Document geladen ist – ohne auf CSS-Dateien, Bilder und eingebettete iframes zu warten.

Javascript Event für body, iframe, img, input="image", link, script und style

Script laden

Scripte können Anweisungen und Funktionen erst ausführen, wenn die Elemente, auf die sie zugreifen, bereits im Browserfenster geladen sind. Ansonsten gibt es eine Fehlermeldung, dass das Element nicht existiert oder unbekannt ist.

onload wird i.d.R. benutzt, um Funktionen aufzurufen, nachdem die Seite vollständig geladen wurde, denn erst dann existieren alle Elemente der Seite (HTML, CSS, Scripte, Bilder …) als DOM-Objekte. Erst nach dem Eintreten des onload-Events können Event Handler wie onclick oder onsubmit für die Elemente der Seite abgehört werden. Der onload-Event Handler bildet darum häufig die zentrale Funktion für die Registriertung weiterer Event Handler.

<!DOCTYPE html>
<html>
<head>
    <link media="screen" href="style.css">
</head>
<body>
    <p>…</p>
    <img src="file.jpg" alt="" />
<script src="responsive-nav.min.js">

<script>
    window.onload = function () {
        alert('Dokument geladen');
        function init();
        function machwas();
    }
</script>
</body>
</html>

window.onload – Einschränkungen

In vielen Browsern feuert window.onload nicht, bevor alle Bilder geladen wurden. Die modernen Browser haben ein Event DOMContentLoaded, das bereits feuert, wenn das DOM geladen ist und vom Script durchquert werden kann. DOMContentLoaded wird ab IE9 von allen modernen Browsern unterstützt.

  1. Dem onload-Event kann nur eine Funktion zugeordnet werden. Wenn mehr als ein Skript beim Laden des Fensters aufgerufen werden soll, wird eine zentrale Funktion benötigt, die alle Funktionen aufruft – damit sind die Skripte dann aber nicht mehr unabhängig.
  2. Das Script wird erst ausgeführt, wenn die Seite vollständig geladen ist. Bis alle Skripte, Grafiken, Plugins und Stylesheets geladen sind, kommt es zu einer sichtbaren Verzögerung, wenn die aufgerufene Funktion die Darstellung der Seite beeinflußt.

Als Antwort auf Problem (1) lassen sich mehrere Javascript-Funktionen für ein Ereignis mit Event Listener des W3C registrieren.

Eine Lösung für Problem (2) platziert das Skript am Ende des Markups der Seite vor der schließenden Klammer des body-Tags, statt das Skript im head-Element der Seite zu laden. Zwar wird auf diese Weise das Skript erst starten, wenn das Markup vollständig geladen ist, aber das Skript muss nicht auf das Laden der Bilder warten. Der Aufruf von Scripts am Ende des HTML-Dokuments ist heute de facto-Standard. Aber auch am Ende der HTML-Datei kann sich ein Script nicht darauf verlassen, dass die Bilder geladen sind.

Andere Lösungen

Heute werden Scripte häufig am Ende des HTML-Dokuments geladen, damit die Seite schneller im Browser gerendert werden kann. An dieser Stelle ist es sicher, dass das Dom geladen ist – nicht aber, dass alle Bilder der Seite geladen sind.

Ein weiterer Lösungsansatz hält mit Hilfe von Timern Ausschau, ob ein bestimmtes Element bereits geladen ist.

jQuery bietet Funktionen, um Javascript-Code auszuführen, nachdem das DOM geladen und navigierbar ist. Das gutes Beispiel ist jQuery's $(document).ready().

Eine generelle Lösung des onload-Problems ist nicht in Sicht und so bleibt beim Laden der Funktionen weiterhin eine fehlerträchtige Lücke.

onload vs async / defer

Wenn Scripte asynchron geladen werden, verzögern sie das onload-Ereignis. Häufig laden asynchron geladene Scripte weitere Scripte – das passiert z.B. bei den Buttons der Social Media wie Facebook Like, Google+ und Twitter – »Teilen und Folgen« – und natürlich auch beim Laden von Werbung.

Google's JavaScript defer Technik hingegen verzögert das Laden, bis das onload-Script gefeuert hat.

Javascript onunload

Javascript onunload ruft einen Event Handler auf, wenn der Browser ein Dokument aus dem Fenster oder Frame entfernt. Das passiert z.B., wenn der Benutzer einen Link klickt, der das Fenster schließt.

Das onunload-Event kann einer Anwendung auf dem Server mitgeteilen, dass der Benutzer die Anwendung verlassen hat, damit die Anwendung auf dem Server Daten über den Benutzer löscht.

Administrations-Anwendungen gehen so vor, damit niemand durch den Zurück-Button des Browsers in das Admin-Interface kommt, wenn sich der autorisierte Benutzer vom Arbeitsplatz abgemeldet hat.

onunload beim Verlassen der Seite

<script type="text/javascript" charset="utf-8">
window.onunload = function() {
   alert('by by Honey')
};
</script>

Eigenschaften von onload / unload

target
Objekt zu dem das Ereignis ursprünglich gesendet wurde
eventPhase
Phase, in der das Ereignis bearbeitet wird: AT_TARGET, BUBBLING_PHASE, CAPTURING_PHASE
bubbles
Nein
cancelable
Nein/dd>
timeStamp
Zeit in Millisekunden, zu der das Ereignis eingetreten ist