Die Antwort auf diese Frage verbirgt sich in der Eigenschaft navigator.onLine. Hat diese den Wert false, so ist der Client sicherlich offline, oder zumindest der Browser im Offline-Modus. Nicht ganz so einfach ist es allerdings wenn der Wert true vorliegt. In der Theorie heißt das, dass der Benutzer online ist. Doch diese Information ist mit Vorsicht zu genießen, denn genau wie ein mehrere Balken anzeigender Empfangsstatus auf einem Smartphone keinen Internetzugang verspricht (beispielweise innerhalb von großen Menschenmassen wie etwa bei Konzerten), ist ein positiver Bescheid von navigator.onLine noch keine hundertprozentige Garantie, dass tatsächlich eine Internetverbindung möglich ist. Aktuelle Browser orientieren sich hierzu dankenswerterweise an den Informationen des Betriebssystems, so dass die Angabe zumindest häufig korrekt ist.
Um den Statuswechsel zu überwachen, also den Übergang von online zu offline und umgekehrt (etwa: Nutzer sitzt im Zug, dieser fährt in einen Tunnel und wieder hinaus), wäre ein permanentes Überprüfen von navigator.onLine mit JavaScript-Bordmitteln wie setInterval() denkbar, doch es geht auch einfacher.
Wechselt der Wert von navigator.onLine auf true oder false, werden die Ereignisse online beziehungsweise offline ausgelöst. Der folgende Code fängt dieses ab und geht auch auf den Sonderfall ein, dass der Internet Explorer bis Version 8 diese Ereignisse nicht im window-Objekt abfängt, sondern in document.body:
if (window.addEventListener)
{
window.addEventListener("online", onlineHandler, false);
window.addEventListener("offline", offlineHandler, false);
}
else if (window.attachEvent)
{
document.body.attachEvent("ononline", onlineHandler);
document.body.attachEvent("onoffline", offlineHandler);
}Ein kleines Beispiel soll sowohl die Eigenschaft als auch die Event-Handler demonstrieren. Die Kompatibilität mit älteren Browsern wird hierbei nicht berücksichtigt, dafür aber setzt der Code auf das neue HTML5-Element <output>. Dort gibt man den aktuellen Online-Zustand aus und aktualisiert die Ansicht sobald sich in Sachen Netzwerkverbindung etwas ändert. Die Abbildung Oben zeigt einen sich im Offline-Modus befindenden Internet Explorer 10 unter Windows 8 (Release Preview) nebst entsprechender JavaScript-Anzeige.
<!DOCTYPE html>
<html>
<head>
<title>HTML5</title>
<style>
.online { background-color: green; }
.offline { background-color: red; }
</style>
<script>
function handler() {
document.getElementsByTagName("output")[0].innerHTML =
(navigator.onLine) ? "ONLINE" : "OFFLINE";
document.getElementsByTagName("output")[0].className =
(navigator.onLine) ? "online" : "offline";
}
###
window.onload = function() {
window.addEventListener("online", handler, false);
window.addEventListener("offline", handler, false);
handler();
};
###
</script>
</head>
<body>
<output defaultValue="?">
</body>
</html>
