检测 navigator.online 上的更改答案

【问题标题】：detect change on navigator.online检测 navigator.online 上的更改
【发布时间】：2011-10-25 09:08:12
【问题描述】：

如何检测导航器是否将您的状态更改为在线/离线？

类似：

var oldState = navigator.onLine; 
window.navigator.onlinechange = function(evnt,newState) { 
         alert('your changed from' + oldState + ' to' + newState + 'state');
}

【问题讨论】：

事实上 navigator.onLine 不显示互联网可用性。它只显示您的计算机连接到任何网络。请改用github.com/PixelsCommander/OnlineJS。它有相应的回调，只需要包含 online.js 到 porject 并设置 window.onLineHandler 和 window.offLineHandler 函数。

标签： javascript onchange navigator

【解决方案1】：

类似这样的（不是每个浏览器都支持这些事件，目前只有 IE 8,9 和 FF > 3 支持这些事件）：

var el = document.body;
if (el.addEventListener) {
   el.addEventListener("online", function () {
     alert("online");}, true);
   el.addEventListener("offline", function () {
     alert("offline");}, true);
}
else if (el.attachEvent) {
   el.attachEvent("ononline", function () {
     alert("online");});
   el.attachEvent("onoffline", function () {
     alert("offline");});
}
else {
   el.ononline = function () {
     alert("online");};
   el.onoffline = function () {
     alert("offline");};
}

浏览器支持有所不同，请查看：http://help.dottoro.com/ljnasgpu.php

【讨论】：

【解决方案2】：

如果它需要更多的跨浏览器兼容，您必须轮询 navigator.onLine 属性。

var status = document.getElementById('status')

setInterval(function () {
  status.innerHTML = navigator.onLine ? 'online' : 'offline';  
}, 250);

演示： http://html5demos.com/nav-online

【讨论】：

这不适用于跨浏览器....只有当连接丢失时 Chrome 才能正确设置 navigator.onLine。如果您删除互联网连接，Safari 和 Firefox 都不会将该标志设置为 false。

【解决方案3】：

借助 body 上的类和此代码，您可以找到

window.ononline = function() {
    alert('You are now online');
}

window.onoffline = function() {
    alert('You are now offline');
}

【讨论】：