Window: online — Ereignis · JavaScript-Referenz

Signatur

window.addEventListener("online", handler)

Beschreibung

Das Ereignis online wird am Window-Objekt ausgelöst, sobald der Browser feststellt, dass wieder eine Netzwerkverbindung besteht. Gleichzeitig wechselt navigator.onLine auf true. Das Gegenstück ist das Ereignis offline.

Sie können sich auf zwei Arten dafür registrieren: mit window.addEventListener("online", handler) oder über die Ereignis-Eigenschaft window.ononline = handler. Das Ereignis ist ein einfaches Event ohne zusätzliche Eigenschaften. Es steigt nicht auf (kein Bubbling) und lässt sich nicht abbrechen.

Typische Einsätze:

Offline gesammelte Formulardaten oder Warteschlangen synchronisieren
einen Offline-Hinweis in der Oberfläche ausblenden
unterbrochene Abfrageintervalle (Polling) oder WebSocket-Verbindungen wieder aufbauen

Wichtig: Das Ereignis meldet nur, dass eine Netzwerkschnittstelle verfügbar ist, zum Beispiel ein aktives WLAN oder LAN. Ob das Internet oder Ihr Server tatsächlich erreichbar ist, garantiert es nicht.

Parameter

Name	Typ	Default	Beschreibung
$type Pflicht	string		Der Ereignisname, hier immer `"online"`.
$handler Pflicht	(event: Event) => void		Callback-Funktion. Sie erhält ein einfaches `Event`-Objekt ohne zusätzliche Eigenschaften.
$options	boolean \| AddEventListenerOptions	false	Optionale Einstellungen wie `once`, `signal` (zum Entfernen per `AbortController`) oder `capture`.

Rückgabewert

Typ

void

Beschreibung

addEventListener gibt undefined zurück. Der Handler erhält ein Event mit type === "online".

Beispiele

Verbindungsstatus in der Oberfläche anzeigen

const banner = document.querySelector('#offline-banner');

const updateStatus = () => {
  banner.hidden = navigator.onLine;
  console.log(navigator.onLine ? 'Wieder online' : 'Offline');
};

window.addEventListener('online', updateStatus);
window.addEventListener('offline', updateStatus);

// Beim Laden den Anfangszustand setzen
updateStatus();

Wieder online

Offline gesammelte Daten nach dem Wiederverbinden senden

const queue = JSON.parse(localStorage.getItem('pending') ?? '[]');

const flushQueue = async () => {
  while (queue.length > 0) {
    try {
      await fetch('/api/notes', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(queue[0])
      });
      queue.shift();
      localStorage.setItem('pending', JSON.stringify(queue));
    } catch (err) {
      console.warn('Server noch nicht erreichbar:', err.message);
      break; // beim nächsten online-Ereignis erneut versuchen
    }
  }
  console.log(`Offene Einträge: ${queue.length}`);
};

window.addEventListener('online', flushQueue);

Offene Einträge: 0

Ereignis-Eigenschaft ononline und Entfernen des Listeners

// Variante 1: on-Eigenschaft (nur ein Handler möglich)
window.ononline = (event) => console.log(`Ereignis: ${event.type}`);

// Variante 2: addEventListener mit AbortController
const controller = new AbortController();
window.addEventListener('online', () => console.log('Verbindung da'), {
  signal: controller.signal
});

// Später, z. B. beim Verlassen einer Ansicht:
controller.abort();   // entfernt den Listener
window.ononline = null; // entfernt den on-Handler

Ereignis: online Verbindung da

Echte Erreichbarkeit nach dem Ereignis prüfen

const isReallyOnline = async () => {
  try {
    const res = await fetch('/ping', { method: 'HEAD', cache: 'no-store' });
    return res.ok;
  } catch {
    return false;
  }
};

window.addEventListener('online', async () => {
  const ok = await isReallyOnline();
  console.log(ok ? 'Server erreichbar' : 'Netz da, Server aber nicht erreichbar');
});

Server erreichbar

// Wichtig · Fallstricke

Kein Beweis für echten Internetzugang: Browser melden online, sobald eine Netzwerkschnittstelle aktiv ist. Das gilt auch für ein WLAN ohne Internet, ein Captive Portal (Anmeldeseite im Hotel-WLAN) oder einen virtuellen Netzwerkadapter, etwa von VPN- oder VM-Software. Prüfen Sie die Erreichbarkeit bei Bedarf selbst mit einem fetch-Aufruf.
Anfangszustand: Beim Laden der Seite wird das Ereignis nicht ausgelöst. Lesen Sie den Anfangswert deshalb über navigator.onLine.
Registrierung: Registrieren Sie den Listener am window. Ältere Browser unterstützten auch document.body oder das Attribut ononline am <body>. Dieses Verhalten ist heute nicht mehr verlässlich.
Service Worker: Im Service-Worker-Kontext gibt es dieses Ereignis nicht. Verwenden Sie dort navigator.onLine oder die Background Sync API, die nicht in allen Browsern verfügbar ist.
Testen: In den Entwicklerwerkzeugen lässt sich das Ereignis über die Netzwerkdrosselung simulieren, indem Sie „Offline“ und danach wieder „Kein Throttling“ wählen.
Kompatibilität: Wird von allen modernen Browsern unterstützt.

Siehe auch

Navigator.onLine Window EventTarget.addEventListener() Element: pointerenter Window: offline