Erkennen Sie, ob die Internetverbindung offline ist?

Wie kann ich in JavaScript erkennen, ob die Internetverbindung offline ist?

Fast alle gängigen Browser Unterstützen Sie jetzt die window.navigator.onLine Eigentum und die entsprechenden online Und offline Fensterereignisse. Führen Sie das folgende Code-Snippet aus, um es zu testen:

console.log('Initially ' + (window.navigator.onLine ? 'on' : 'off') + 'line');

window.addEventListener('online', () => console.log('Became online'));
window.addEventListener('offline', () => console.log('Became offline'));

document.getElementById('statusCheck').addEventListener('click', () => console.log('window.navigator.onLine is ' + window.navigator.onLine));

<button id="statusCheck">Click to check the <tt>window.navigator.onLine</tt> property</button><br /><br />
Check the console below for results:

Versuchen Sie, Ihr System oder Ihren Browser in den Offline-/Online-Modus zu versetzen und überprüfen Sie das Protokoll oder die window.navigator.onLine Eigenschaft für die Wertänderungen.

Beachten Sie jedoch dieses Zitat von Mozilla-Dokumentation:

Wenn der Browser in Chrome und Safari keine Verbindung zu einem lokalen Netzwerk (LAN) oder einem Router herstellen kann, ist er offline. alle anderen Bedingungen kehren zurück true. Also, während Sie können davon ausgehen, dass der Browser offline ist, wenn er a zurückgibt false Wert, Sie können nicht davon ausgehen, dass a true Wert bedeutet notwendigerweise, dass der Browser auf das Internet zugreifen kann. Möglicherweise erhalten Sie Fehlalarme, beispielsweise wenn auf dem Computer eine Virtualisierungssoftware ausgeführt wird, die über virtuelle Ethernet-Adapter verfügt, die immer „verbunden“ sind. Wenn Sie also wirklich den Online-Status des Browsers ermitteln möchten, sollten Sie zusätzliche Mittel zur Überprüfung entwickeln.

In Firefox und Internet Explorer sendet das Umschalten des Browsers in den Offline-Modus eine false Wert. Bis Firefox 41 geben alle anderen Bedingungen a zurück true Wert; Seit Firefox 41 richtet sich der Wert unter OS X und Windows nach der tatsächlichen Netzwerkkonnektivität.

(Hervorhebung liegt bei mir)

Das bedeutet, wenn window.navigator.onLine Ist false (oder du bekommst eine offline Event) haben Sie garantiert keine Internetverbindung.

Wenn ja true jedoch (oder Sie bekommen eine online Ereignis) bedeutet dies bestenfalls nur, dass das System mit einem Netzwerk verbunden ist. Dies bedeutet beispielsweise nicht, dass Sie über einen Internetzugang verfügen. Um dies zu überprüfen, müssen Sie weiterhin eine der in den anderen Antworten beschriebenen Lösungen verwenden.

_{Ich hatte ursprünglich vor, dies als Update zu Grant Wagners Antwort zu posten, aber es schien eine zu große Änderung zu sein, insbesondere wenn man bedenkt, dass das Update von 2014 bereits nicht von ihm stammte.}

Sie können feststellen, dass die Verbindung verloren gegangen ist, indem Sie Folgendes tun: fehlgeschlagene XHR-Anfragen.

Der Standardansatz ist: Versuchen Sie die Anfrage erneut ein paar Male. Wenn es nicht durchgeht, den Benutzer warnen um die Verbindung zu überprüfen und scheitern würdevoll.

Randnotiz: Die gesamte Anwendung in einen „Offline“-Zustand zu versetzen, kann zu einer Menge fehleranfälliger Arbeit bei der Statusbearbeitung führen. Drahtlose Verbindungen können kommen und gehen usw. Daher ist es möglicherweise die beste Wahl, einfach einen ordnungsgemäßen Ausfall zu erzielen und die Daten zu bewahren. und benachrichtigen Sie den Benutzer. Dadurch kann er das Verbindungsproblem, falls vorhanden, schließlich beheben und Ihre App mit einem angemessenen Maß an Fehlerfreiheit weiter verwenden.

Randnotiz: Sie können die Konnektivität einer zuverlässigen Website wie Google überprüfen. Dies ist jedoch möglicherweise nicht ganz hilfreich, wenn Sie nur versuchen, Ihre eigene Anfrage zu stellen, da Google zwar verfügbar ist, Ihre eigene Anwendung jedoch möglicherweise nicht verfügbar ist und Sie dies trotzdem tun müssen Behandeln Sie Ihr eigenes Verbindungsproblem. Der Versuch, einen Ping an Google zu senden, wäre ein guter Weg, um zu bestätigen, dass die Internetverbindung selbst unterbrochen ist. Wenn diese Informationen also für Sie nützlich sind, könnte sich die Mühe lohnen.

Randnotiz: Senden eines Pings könnte auf die gleiche Weise erreicht werden, wie Sie jede Art von bidirektionaler Ajax-Anfrage stellen würden, aber das Senden eines Pings an Google würde in diesem Fall einige Herausforderungen mit sich bringen. Erstens hätten wir die gleichen domänenübergreifenden Probleme, die typischerweise bei der Ajax-Kommunikation auftreten. Eine Möglichkeit besteht darin, einen serverseitigen Proxy einzurichten, wobei wir tatsächlich ping Google (oder eine andere Website) und geben Sie die Ergebnisse des Pings an die App zurück. Das ist ein Catch-22 Denn wenn tatsächlich die Internetverbindung das Problem ist, können wir nicht auf den Server zugreifen, und wenn das Verbindungsproblem nur in unserer eigenen Domain auftritt, können wir den Unterschied nicht erkennen. Es könnten andere domänenübergreifende Techniken ausprobiert werden, z. B. das Einbetten eines Iframes in Ihre Seite, der auf google.com verweist, und das anschließende Abfragen des Iframes auf Erfolg/Misserfolg (Untersuchen des Inhalts usw.). Das Einbetten eines Bildes sagt uns möglicherweise nicht wirklich etwas, da wir eine nützliche Antwort des Kommunikationsmechanismus benötigen, um eine gute Schlussfolgerung darüber zu ziehen, was vor sich geht. Auch hier kann es schwieriger sein, den Status der Internetverbindung als Ganzes zu ermitteln, als es wert ist. Sie müssen diese Optionen für Ihre spezifische App abwägen.

IE 8 wird das unterstützen window.navigator.onLine Eigentum.

Aber bei anderen Browsern oder Betriebssystemen hilft das natürlich nicht. Ich gehe davon aus, dass sich auch andere Browser-Anbieter dafür entscheiden werden, diese Eigenschaft bereitzustellen, da es wichtig ist, den Online-/Offline-Status in Ajax-Anwendungen zu kennen.

Bis das passiert, entweder XHR oder ein Image() oder <img> Anfrage kann etwas bieten, das der von Ihnen gewünschten Funktionalität nahe kommt.

Aktualisierung (16.11.2014)

Die meisten Browser unterstützen diese Eigenschaft mittlerweile, die Ergebnisse können jedoch variieren.

Zitat aus Mozilla-Dokumentation:

Wenn der Browser in Chrome und Safari keine Verbindung zu einem lokalen Netzwerk (LAN) oder einem Router herstellen kann, ist er offline. alle anderen Bedingungen kehren zurück true. Sie können also davon ausgehen, dass der Browser offline ist, wenn er a zurückgibt false Wenn Sie einen Wert angeben, können Sie nicht davon ausgehen, dass ein wahrer Wert unbedingt bedeutet, dass der Browser auf das Internet zugreifen kann. Möglicherweise erhalten Sie Fehlalarme, beispielsweise wenn auf dem Computer eine Virtualisierungssoftware ausgeführt wird, die über virtuelle Ethernet-Adapter verfügt, die immer „verbunden“ sind. Wenn Sie also wirklich den Online-Status des Browsers ermitteln möchten, sollten Sie zusätzliche Mittel zur Überprüfung entwickeln.

In Firefox und Internet Explorer sendet das Umschalten des Browsers in den Offline-Modus eine false Wert. Alle anderen Bedingungen geben a zurück true Wert.

if (navigator.onLine) {
  alert('online');
} else {
  alert('offline');
}

Sehen onLine Grundlegende Verwendung

Dafür gibt es mehrere Möglichkeiten:

• AJAX-Anfrage an Ihre eigene Website. Wenn diese Anfrage fehlschlägt, besteht eine gute Chance, dass die Verbindung fehlerhaft ist. Der JQuery Die Dokumentation enthält einen Abschnitt über Behandlung fehlgeschlagener AJAX-Anfragen. Hüten Sie sich vor dem Same-Origin-Richtlinie Dies kann dazu führen, dass Sie nicht mehr auf Websites außerhalb Ihrer Domain zugreifen können.
• Du könntest eine setzen onerror in einem (n imgwie <img src="http://www.example.com/singlepixel.gif" onerror="alert('Connection dead');" />.

Diese Methode könnte auch fehlschlagen, wenn das Quellbild verschoben/umbenannt wird, und wäre im Allgemeinen eine schlechtere Wahl als die Ajax-Option.

Es gibt also verschiedene Möglichkeiten, dies zu erkennen, keine ist perfekt, aber da es keine Möglichkeit gibt, aus der Browser-Sandbox zu springen und direkt auf den Netzverbindungsstatus des Benutzers zuzugreifen, scheinen sie die besten Optionen zu sein.

Wie olliej sagte, mit dem navigator.onLine Browser-Eigenschaft ist dem Senden von Netzwerkanfragen vorzuziehen und dementsprechend mit Developer.mozilla.org/En/Online_and_offline_eventses wird sogar von alten Versionen von Firefox und IE unterstützt.

Kürzlich hat die WHATWG die Hinzufügung des spezifiziert online Und offline Ereignisse, falls Sie darauf reagieren müssen navigator.onLine Änderungen.

Bitte beachten Sie auch den Link von Daniel Silveira, der darauf hinweist, dass es nicht immer eine gute Idee ist, sich bei der Synchronisierung mit dem Server auf diese Signale/Eigenschaften zu verlassen.

Sie können verwenden $.ajax()‘S error Rückruf, der ausgelöst wird, wenn die Anfrage fehlschlägt. Wenn textStatus entspricht der Zeichenfolge „timeout“, was wahrscheinlich bedeutet, dass die Verbindung unterbrochen ist:

function (XMLHttpRequest, textStatus, errorThrown) {
  // typically only one of textStatus or errorThrown 
  // will have info
  this; // the options for this ajax request
}

Von dem Dok:

Fehler: Eine Funktion, die aufgerufen wird, wenn die Anfrage fehlschlägt. Der Funktion werden drei Argumente übergeben: Das XMLHttpRequest-Objekt, eine Zeichenfolge, die die Art des aufgetretenen Fehlers beschreibt, und ein optionales Ausnahmeobjekt, falls eines aufgetreten ist. Mögliche Werte für das zweite Argument (außer null) sind „timeout“, „error“, „notmodified“ und „parsererror“. Dies ist ein Ajax-Event

Also zum Beispiel:

 $.ajax({
   type: "GET",
   url: "keepalive.php",
   success: function(msg){
     alert("Connection active!")
   },
   error: function(XMLHttpRequest, textStatus, errorThrown) {
       if(textStatus == 'timeout') {
           alert('Connection seems dead!');
       }
   }
 });