wake-up-neo.com

Überprüfen Sie, ob die Internetverbindung mit Javascript besteht.

Wie können Sie mithilfe von Javascript überprüfen, ob eine Internetverbindung besteht? Auf diese Weise könnten einige Bedingungen lauten: "Verwenden Sie während der Produktion die zwischengespeicherte Google-Version von JQuery. Verwenden Sie je nach Internetverbindung entweder diese oder eine lokale Version während der Entwicklung.".

206
Lance Pollard

Die beste Option für Ihren speziellen Fall könnte sein:

Kurz vor deinem Abschluss </body> Etikett:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.10.2.min.js"><\/script>')</script>

Dies ist wahrscheinlich der einfachste Weg, da sich Ihr Problem um jQuery dreht.

Wenn Sie eine robustere Lösung wünschen, können Sie versuchen:

var online = navigator.onLine;

Lesen Sie mehr über W3Cs Spezifikation für Offline-Web-Apps . Beachten Sie jedoch, dass dies in modernen Webbrowsern am besten funktioniert. Dies funktioniert möglicherweise nicht wie erwartet oder überhaupt nicht mit älteren Webbrowsern.

Alternativ ist eine XHR-Anfrage an Ihren eigenen Server keine so schlechte Methode zum Testen Ihrer Konnektivität. In Anbetracht einer der anderen Antworten heißt es, dass es zu viele Fehlerquellen für eine XHR gibt. Wenn die XHR beim Herstellen der Verbindung fehlerhaft ist, ist sie auch bei der routinemäßigen Verwendung fehlerhaft. Wenn Ihre Site aus irgendeinem Grund nicht erreichbar ist, sind wahrscheinlich auch Ihre anderen Dienste, die auf denselben Servern ausgeführt werden, nicht erreichbar. Diese Entscheidung liegt bei Ihnen.

Ich würde nicht empfehlen, eine XHR-Anfrage an einen anderen Dienst zu richten, auch nicht an google.com. Stellen Sie die Anfrage an Ihren Server oder gar nicht.

Was bedeutet es, "online" zu sein?

Es scheint einige Verwirrung darüber zu geben, was "online" bedeutet. Bedenken Sie, dass es sich beim Internet um eine Reihe von Netzwerken handelt, obwohl Sie manchmal über ein VPN verfügen und keinen Zugriff auf das Internet "im Ganzen" oder das World Wide Web haben. Oft haben Unternehmen ihre eigenen Netzwerke, die eine eingeschränkte Konnektivität zu anderen externen Netzwerken aufweisen. Daher können Sie als "online" betrachtet werden. Online zu sein bedeutet nur, dass Sie mit a einem Netzwerk verbunden sind und nicht, dass die Dienste, zu denen Sie eine Verbindung herstellen möchten, verfügbar oder erreichbar sind.

So können Sie feststellen, ob ein Host von Ihrem Netzwerk aus erreichbar ist:

function hostReachable() {

  // Handle IE and more capable browsers
  var xhr = new ( window.ActiveXObject || XMLHttpRequest )( "Microsoft.XMLHTTP" );

  // Open new request as a HEAD to the root hostname with a random param to bust the cache
  xhr.open( "HEAD", "//" + window.location.hostname + "/?rand=" + Math.floor((1 + Math.random()) * 0x10000), false );

  // Issue request and handle response
  try {
    xhr.send();
    return ( xhr.status >= 200 && (xhr.status < 300 || xhr.status === 304) );
  } catch (error) {
    return false;
  }

}

Das Gist dafür finden Sie auch hier: https://Gist.github.com/jpsilvashy/5725579

Details zur lokalen Implementierung

Einige Leute haben kommentiert: "Ich werde immer falsch zurückgeschickt". Das liegt daran, dass Sie es wahrscheinlich auf Ihrem lokalen Server testen. Unabhängig davon, an welchen Server Sie die Anfrage stellen, müssen Sie in der Lage sein, auf die HEAD Anfrage zu antworten, diese kann natürlich in ein GET geändert werden, wenn Sie möchten.

258
JP Silvashy

Ok, vielleicht etwas spät im Spiel, aber wie sieht es mit einem Online-Bild aus? Ich meine, der OP muss wissen, ob er die Google CMD oder die lokale JQ-Kopie nehmen muss, aber das bedeutet nicht, dass der Browser kein Javascript lesen kann, egal was, oder?

<script>
function doConnectFunction() {
// Grab the GOOGLE CMD
}
function doNotConnectFunction() {
// Grab the LOCAL JQ
}

var i = new Image();
i.onload = doConnectFunction;
i.onerror = doNotConnectFunction;
// CHANGE IMAGE URL TO ANY IMAGE YOU KNOW IS LIVE
i.src = 'http://gfx2.hotmail.com/mail/uxp/w4/m4/pr014/h/s7.png?d=' + escape(Date());
// escape(Date()) is necessary to override possibility of image coming from cache
</script>

Nur meine 2 Cent

38
morespace54

5 Jahre später:

Heute gibt es JS-Bibliotheken für Sie, wenn Sie sich nicht mit den verschiedenen Methoden befassen möchten, die auf dieser Seite beschrieben werden.

Eine davon ist https://github.com/hubspot/offline . Es überprüft die Konnektivität einer vordefinierten URI, standardmäßig Ihres Favicons. Es erkennt automatisch, wann die Konnektivität des Benutzers wiederhergestellt wurde, und bietet nützliche Ereignisse wie up und down, an die Sie sich binden können, um Ihre Benutzeroberfläche zu aktualisieren.

13
Phil Rykoff

Sie können den Ping-Befehl nachahmen.

Verwenden Sie Ajax, um einen Zeitstempel an Ihren eigenen Server anzufordern. Definieren Sie einen Timer mit setTimeout auf 5 Sekunden. Wenn keine Antwort erfolgt, versuchen Sie es erneut.

Wenn in 4 Versuchen keine Antwort eingeht, können Sie davon ausgehen, dass das Internet ausgefallen ist.

So können Sie diese Routine in regelmäßigen Abständen wie 1 oder 3 Minuten überprüfen.

Das scheint mir eine gute und saubere Lösung zu sein.

5
Vitim.us

Sie können es versuchen, indem Sie einige Male XHR-Anfragen senden. Wenn Sie dann eine Fehlermeldung erhalten, liegt ein Problem mit der Internetverbindung vor.

Bearbeiten:  Ich habe dieses JQuery-Skript gefunden, das tut, wonach Sie fragen. Ich habe es jedoch nicht getestet.

1
Soufiane Hassou

Ich habe dafür ein jQuery-Plugin geschrieben. Standardmäßig wird die aktuelle URL überprüft (da diese bereits einmal aus dem Web geladen wurde), oder Sie können eine URL angeben, die als Argument verwendet werden soll. Es ist nicht die beste Idee, immer eine Anfrage an Google zu richten, da diese in verschiedenen Ländern zu unterschiedlichen Zeiten blockiert wird. Möglicherweise sind Sie auch der Frage ausgeliefert, wie die Verbindung zwischen einem bestimmten Ozean, einer bestimmten Wetterfront und einem bestimmten politischen Klima an diesem Tag aussehen könnte.

http://tomriley.net/blog/archives/111

0
tripRev