我正在尝试使用HTML5的在线和离线事件准确地检测浏览器何时离线。
这是我的代码：
<script>
// FIREFOX
$(window).bind("online", applicationBackOnline);
$(window).bind("offline", applicationOffline);
//IE
window.onload = function() {
document.body.ononline = IeConnectionEvent;
document.body.onoffline = IeConnectionEvent;
}
</script>
当我在Firefox或IE上仅点击“脱机工作”时，它的表现很好，但是当我实际拔掉线时，它有点随机。
最好的方法是检测这种变化的方式是什么？ 我想避免使用带有超时的重复ajax调用。
目前在2011年，各种浏览器厂商无法就如何定义离线达成一致。一些浏览器有一个"工作脱机"功能，他们认为这与缺乏网络访问是不同的，而后者又不同于互联网访问。整个事情一团糟。一些浏览器厂商在实际网络访问丢失时更新“navigator.onLine”标志，而另一些则没有。
根据规范：
如果用户代理程序明确处于脱机状态(与网络断开连接)，则返回false。如果用户代理程序可能在线，则返回true。
当此属性的值更改时，将触发online和offline事件。
如果用户代理程序在用户跟随链接或脚本请求远程页面时(或知道这样的尝试将失败)，不会联系网络，则navigator.onLine属性必须返回false，否则必须返回true。
最后，规范指出：
该属性本质上是不可靠的。一台计算机可以连接到网络，但没有Internet访问权限。
https://bugzilla.mozilla.org/show_bug.cgi?id=654579
但是，回答这个问题 - 你不能依靠在线/离线事件/属性来检测是否实际上存在网络连接。
相反，您必须使用替代方法。
此 Mozilla 开发人员文章的 "Notes" 部分提供了两种替代方法的链接：
https://developer.mozilla.org/en/Online_and_offline_events
"If the API isn't implemented in the browser, you can use other signals to detect if you are offline including listening for AppCache error events and responses from XMLHttpRequest."http://www.html5rocks.com/en/mobile/workingoffthegrid/#toc-appcache
...以及“监听XMLHttpRequest失败”的方法示例：
http://www.html5rocks.com/en/mobile/workingoffthegrid/#toc-xml-http-request
HTH, -- Chad
今天有一个开源的JavaScript库可以完成这项工作，它叫做Offline.js。
自动向您的用户显示在线/离线指示。
https://github.com/HubSpot/offline
请务必检查完整的README文件。它包含了你可以挂钩的事件。
下面是一个测试页面。顺便说一下，它很漂亮/有一个不错的反馈UI！:)
Offline.js Simulate UI是一个Offline.js插件，它允许您测试您的页面如何响应不同的连通状态，而无需使用蛮力方法来禁用您的实际连通性。
(function () {
var displayOnlineStatus = document.getElementById("online-status"),
isOnline = function () {
displayOnlineStatus.innerHTML = "Online";
displayOnlineStatus.className = "online";
},
isOffline = function () {
displayOnlineStatus.innerHTML = "Offline";
displayOnlineStatus.className = "offline";
};
if (window.addEventListener) {
/*
Works well in Firefox and Opera with the
Work Offline option in the File menu.
Pulling the ethernet cable doesn't seem to trigger it.
Later Google Chrome and Safari seem to trigger it well
*/
window.addEventListener("online", isOnline, false);
window.addEventListener("offline", isOffline, false);
}
else {
/*
Works in IE with the Work Offline option in the
File menu and pulling the ethernet cable
*/
document.body.ononline = isOnline;
document.body.onoffline = isOffline;
}
})();
来源: http://robertnyman.com/html5/offline/online-offline-events.html
在Web开发中，有时候需要检测用户是否在线。HTML5提供了一种解决方案 - Online/Offline事件。
当网络连接断开或重新连接时，会分别触发offline和online事件。可以通过监听这些事件来执行相应的操作，例如更新UI界面、保存数据等。
最近，所有主要浏览器的navigator.onLine表现一致，因此可用。
if (navigator.onLine) {
// do things that need connection
} else {
// do things that don't need connection
}
false。在IE 8中，该属性位于body而不是window。如@Junto所说，特别是Firefox桌面版，某些浏览器的 window.navigator.onLine 属性及其相关事件目前不可靠。因此，我编写了一个小函数（使用jQuery），定期检查网络连接状态并引发相应的 offline 和 online 事件：
// Global variable somewhere in your app to replicate the
// window.navigator.onLine variable (this last is not modifiable). It prevents
// the offline and online events to be triggered if the network
// connectivity is not changed
var IS_ONLINE = true;
function checkNetwork() {
$.ajax({
// Empty file in the root of your public vhost
url: '/networkcheck.txt',
// We don't need to fetch the content (I think this can lower
// the server's resources needed to send the HTTP response a bit)
type: 'HEAD',
cache: false, // Needed for HEAD HTTP requests
timeout: 2000, // 2 seconds
success: function() {
if (!IS_ONLINE) { // If we were offline
IS_ONLINE = true; // We are now online
$(window).trigger('online'); // Raise the online event
}
},
error: function(jqXHR) {
if (jqXHR.status == 0 && IS_ONLINE) {
// We were online and there is no more network connection
IS_ONLINE = false; // We are now offline
$(window).trigger('offline'); // Raise the offline event
} else if (jqXHR.status != 0 && !IS_ONLINE) {
// All other errors (404, 500, etc) means that the server responded,
// which means that there are network connectivity
IS_ONLINE = true; // We are now online
$(window).trigger('online'); // Raise the online event
}
}
});
}
// Hack to use the checkNetwork() function only on Firefox
// (https://dev59.com/Um025IYBdhLWcg3w9qyQ#9238538)
// (But it may be too restrictive regarding other browser
// who does not properly support online / offline events)
if (!(window.mozInnerScreenX == null)) {
window.setInterval(checkNetwork, 30000); // Check the network every 30 seconds
}
通过jQuery监听在线和离线事件：
$(window).bind('online offline', function(e) {
if (!IS_ONLINE || !window.navigator.onLine) {
alert('We have a situation here');
} else {
alert('Battlestation connected');
}
});
navigator.onLine很混乱
当我试图向服务器发起ajax请求时，我会遇到这个问题。
当客户端离线时，可能会出现几种情况：
我正在使用的解决方案是使用JavaScript手动控制状态。我设定了一个成功调用的条件，在任何其他情况下，我假设客户端处于离线状态。 类似于以下内容：
var offline;
pendingItems.push(item);//add another item for processing
updatePendingInterval = setInterval("tryUpdatePending()",30000);
tryUpdatePending();
function tryUpdatePending() {
offline = setTimeout("$('#offline').show()", 10000);
$.ajax({ data: JSON.stringify({ items: pendingItems }), url: "WebMethods.aspx/UpdatePendingItems", type: "POST", dataType: "json", contentType: "application/json; charset=utf-8",
success: function (msg) {
if ((!msg) || msg.d != "ok")
return;
pending = new Array(); //empty the pending array
$('#offline').hide();
clearTimeout(offline);
clearInterval(updatePendingInterval);
}
});
}
navigator.onLine属性。请参见此处：http://www.w3.org/TR/offline-webapps/#related。可能您当前的行为是随机的，因为JavaScript只读取“browser”变量，然后知道您是离线还是在线，但实际上它并没有检查网络连接。如果这正是您要寻找的，请告诉我们。祝好！var randomValue = Math.floor((1 + Math.random()) * 0x10000)
$.ajax({
type: "HEAD",
url: "http://yoururl.com?rand=" + randomValue,
contentType: "application/json",
error: function(response) { return response.status == 0; },
success: function() { return true; }
});
您可以用document.location.pathname替换yoururl.com。
解决方案的关键是尝试连接到您的域名，如果无法连接，则表示您处于离线状态。适用于跨浏览器。
response.status == 0。 - Nielsdefine(['offline'], function (Offline) {
//Tested with Chrome and IE11 Latest Versions as of 20140412
//Offline.js - http://github.hubspot.com/offline/
//Offline.js is a library to automatically alert your users
//when they've lost internet connectivity, like Gmail.
//It captures AJAX requests which were made while the connection
//was down, and remakes them when it's back up, so your app
//reacts perfectly.
//It has a number of beautiful themes and requires no configuration.
//Object that will be exposed to the outside world. (Revealing Module Pattern)
var OfflineDetector = {};
//Flag indicating current network status.
var isOffline = false;
//Configuration Options for Offline.js
Offline.options = {
checks: {
xhr: {
//By default Offline.js queries favicon.ico.
//Change this to hit a service that simply returns a 204.
url: 'favicon.ico'
}
},
checkOnLoad: true,
interceptRequests: true,
reconnect: true,
requests: true,
game: false
};
//Offline.js raises the 'up' event when it is able to reach
//the server indicating that connection is up.
Offline.on('up', function () {
isOffline = false;
});
//Offline.js raises the 'down' event when it is unable to reach
//the server indicating that connection is down.
Offline.on('down', function () {
isOffline = true;
});
//Expose Offline.js instance for outside world!
OfflineDetector.Offline = Offline;
//OfflineDetector.isOffline() method returns the current status.
OfflineDetector.isOffline = function () {
return isOffline;
};
//start() method contains functionality to repeatedly
//invoke check() method of Offline.js.
//This repeated call helps in detecting the status.
OfflineDetector.start = function () {
var checkOfflineStatus = function () {
Offline.check();
};
setInterval(checkOfflineStatus, 3000);
};
//Start OfflineDetector
OfflineDetector.start();
return OfflineDetector;
});