Ich versuche mithilfe der HTML5-Online- und Offline-Ereignisse genau zu erkennen, wann der Browser offline geschaltet wird.
Hier ist mein Code:
<script>
// FIREFOX
$(window).bind("online", applicationBackOnline);
$(window).bind("offline", applicationOffline);
//IE
window.onload = function() {
document.body.ononline = IeConnectionEvent;
document.body.onoffline = IeConnectionEvent;
}
</script>
Es funktioniert gut, wenn ich in Firefox oder IE einfach auf "Offline arbeiten" drücke, aber es funktioniert zufällig, wenn ich den Draht tatsächlich abziehe.
Was ist der beste Weg, um diese Änderung zu erkennen? Ich möchte vermeiden, Ajax-Anrufe mit Zeitüberschreitungen zu wiederholen.
javascript
jquery
offline
jquery-events
network-connection
Pierre Duplouy
quelle
quelle
Antworten:
Die Browser-Anbieter können sich nicht darauf einigen, wie Offline definiert werden soll. Einige Browser verfügen über eine Offline-Funktion, die sie als getrennt von einem fehlenden Netzwerkzugriff betrachten, der sich wiederum vom Internetzugang unterscheidet. Das Ganze ist ein Chaos. Einige Browser-Anbieter aktualisieren das navigator.onLine-Flag, wenn der tatsächliche Netzwerkzugriff verloren geht, andere nicht.
Aus der Spezifikation:
Schließlich stellt die Spezifikation fest:
quelle
Die wichtigsten Browser-Anbieter unterscheiden sich darin, was "offline" bedeutet.
Chrome und Safari erkennen automatisch, wenn Sie "offline" gehen. Dies bedeutet, dass "online" -Ereignisse und -Eigenschaften automatisch ausgelöst werden, wenn Sie Ihr Netzwerkkabel abziehen.
Firefox (Mozilla), Opera und IE verfolgen einen anderen Ansatz und betrachten Sie als "online", es sei denn, Sie wählen im Browser explizit "Offline-Modus" - auch wenn Sie keine funktionierende Netzwerkverbindung haben.
Es gibt gültige Argumente für das Firefox / Mozilla-Verhalten, die in den Kommentaren dieses Fehlerberichts beschrieben werden:
https://bugzilla.mozilla.org/show_bug.cgi?id=654579
Um die Frage zu beantworten: Sie können sich nicht auf die Online- / Offline-Ereignisse / -Eigenschaft verlassen, um festzustellen, ob tatsächlich eine Netzwerkverbindung besteht.
Stattdessen müssen Sie alternative Ansätze verwenden.
Der Abschnitt "Notizen" dieses Mozilla Developer-Artikels enthält Links zu zwei alternativen Methoden:
https://developer.mozilla.org/en/Online_and_offline_events
"Wenn die API nicht im Browser implementiert ist, können Sie mithilfe anderer Signale erkennen, ob Sie offline sind, einschließlich des Abhörens auf AppCache-Fehlerereignisse und Antworten von XMLHttpRequest."
Dies verweist auf ein Beispiel für den Ansatz "Auf AppCache-Fehlerereignisse warten":
http://www.html5rocks.com/de/mobile/workingoffthegrid/#toc-appcache
... und ein Beispiel für den Ansatz "Auf XMLHttpRequest-Fehler warten":
http://www.html5rocks.com/de/mobile/workingoffthegrid/#toc-xml-http-request
HTH, - Tschad
quelle
updates this property when the OS reports a change in network connectivity on Windows, Linux, and OS X.
(gemäß den von Ihnen erwähnten Dokumenten). Es ist also nicht nur offline, wenn Sie mit dem Browser "Offline-Modus" surfenHeute gibt es eine Open-Source-JavaScript-Bibliothek, die diesen Job erledigt: Sie heißt
Offline.js
.https://github.com/HubSpot/offline
Überprüfen Sie unbedingt die vollständige README-Datei . Es enthält Ereignisse, an die Sie sich anschließen können.
Hier ist eine Testseite . Es ist wunderschön / hat übrigens eine nette Feedback-Benutzeroberfläche! :) :)
quelle
Der beste Weg, der jetzt auf allen wichtigen Browsern funktioniert, ist das folgende Skript:
Quelle: http://robertnyman.com/html5/offline/online-offline-events.html
quelle
navigator.onLine
Zeigt seit kurzem das gleiche auf allen gängigen Browsern und ist somit verwendbar.Die ältesten Versionen, die dies richtig unterstützen, sind: Firefox 41 , IE 9, Chrome 14 und Safari 5.
Derzeit wird dies fast das gesamte Benutzerspektrum repräsentieren. Sie sollten jedoch immer überprüfen, welche Funktionen die Benutzer Ihrer Seite haben.
Vor FF 41 wurde nur
false
angezeigt , wenn der Benutzer den Browser manuell in den Offline-Modus versetzte. In IE 8 befand sich die Eigenschaft auf derbody
stattwindow
.Quelle: caniuse
quelle
Das
window.navigator.onLine
Attribut und die damit verbundene Ereignisse sind derzeit nicht zuverlässig auf bestimmtem Web - Browser ( insbesondere Firefox Desktop ) als @Junto sagte, so dass ich eine kleine Funktion (mit jQuery) schrieb , dass in regelmäßigen Abständen die Netzwerkverbindung Status überprüfen und die entsprechenden erhöhenoffline
undonline
Ereignis:Sie können es so verwenden:
So hören Sie sich Offline- und Online-Ereignisse an (mithilfe von jQuery):
quelle
navigator.onLine ist ein Chaos
Ich stelle mich dem, wenn ich versuche, einen Ajax-Anruf an den Server zu tätigen.
Es gibt mehrere mögliche Situationen, in denen der Client offline ist:
Die Lösung, die ich verwende, besteht darin, den Status selbst mit Javascript zu steuern. Ich setze die Bedingung für einen erfolgreichen Anruf, in jedem anderen Fall gehe ich davon aus, dass der Client offline ist. Etwas wie das:
quelle
In HTML5 können Sie die
navigator.onLine
Eigenschaft verwenden. Schau hier:http://www.w3.org/TR/offline-webapps/#related
Wahrscheinlich ist Ihr aktuelles Verhalten zufällig, da das Javascript nur die Variable "Browser" bereitstellt und dann weiß, ob Sie offline und online sind, aber die Netzwerkverbindung nicht überprüft.
Lassen Sie uns wissen, ob Sie danach suchen.
Mit freundlichen Grüßen,
quelle
Hier finden Sie das Modul require.js, das ich für Offline geschrieben habe.
Bitte lesen Sie diesen Blog-Beitrag und teilen Sie mir Ihre Gedanken mit. http://zen-and-art-of-programming.blogspot.com/2014/04/html-5-offline-application-development.html Es enthält ein Codebeispiel mit offline.js, um zu erkennen, wann der Client offline ist.
quelle
Sie können Offline-Cross-Browser-Weg wie unten leicht erkennen
Sie können yoururl.com durch ersetzen
document.location.pathname
.Der Kern der Lösung besteht darin, eine Verbindung zu Ihrem Domain-Namen herzustellen, wenn Sie keine Verbindung herstellen können - Sie sind offline. funktioniert browserübergreifend.
quelle
Ich verwende die Option FALLBACK im HTML5-Cache-Manifest, um zu überprüfen, ob meine HTML5-App online oder offline ist, indem:
Auf der HTML-Seite verwende ich Javascript, um den Inhalt der Online / Offline-TXT-Datei zu lesen:
Im Offline-Modus liest das Skript den Inhalt der Datei offline.txt. Anhand des Textes in den Dateien können Sie feststellen, ob die Webseite online oder offline ist.
quelle
Hier ist meine Lösung.
Getestet mit IE, Opera, Chrome, FireFox, Safari, als Phonegap WebApp unter IOS 8 und als Phonegap WebApp unter Android 4.4.2
Diese Lösung funktioniert nicht mit FireFox auf localhost.
================================================== ===============================
onlineCheck.js (Dateipfad: "root / js / onlineCheck.js):
================================================== ===============================
index.html (Dateipfad: "root / index.html"):
================================================== ===============================
checkOnline.php (Dateipfad: "root"):
quelle
Nun, Sie können das Javascript-Plugin ausprobieren, das die Browserverbindung in Echtzeit überwachen und den Benutzer benachrichtigen kann, wenn das Internet oder die Browserverbindung mit dem Internet unterbrochen wurde.
Wiremonkey Javascript Plugin und die Demo finden Sie hier
quelle
Dokumentkörper verwenden:
Verwenden des Javascript-Ereignisses:
Referenz :
Document-Body: Online-Ereignis
Javascript-Ereignis: Online- und Offline-Ereignisse
Zusätzliche Gedanken:
Um die "Netzwerkverbindung ist nicht dasselbe wie Internetverbindung" zu versenden Problem der oben genannten Methoden: Sie können die Internetverbindung einmal mit Ajax beim Anwendungsstart überprüfen und einen Online- / Offline-Modus konfigurieren. Erstellen Sie eine Schaltfläche zum erneuten Verbinden, damit der Benutzer online gehen kann. Fügen Sie bei jeder fehlgeschlagenen Ajax-Anforderung eine Funktion hinzu, die den Benutzer in den Offline-Modus zurückversetzt.
quelle
window.addEventListener('online', updateOnlineStatus(event) );
Sie rufen sofort die Funktion updateOnlineStatus () auf. Es sollte seinwindow.addEventListener('online', updateOnlineStatus );