如何在JavaScript中检测Internet连接是否离线?


当前回答

导航器等方法的问题。onLine是他们不兼容的一些浏览器和移动版本,一个选项,帮助我很多是使用经典的XMLHttpRequest方法,也预见到可能的情况下,文件存储在缓存响应XMLHttpRequest。Status大于200小于304。

这是我的代码:

 var xhr = new XMLHttpRequest();
 //index.php is in my web
 xhr.open('HEAD', 'index.php', true);
 xhr.send();

 xhr.addEventListener("readystatechange", processRequest, false);

 function processRequest(e) {
     if (xhr.readyState == 4) {
         //If you use a cache storage manager (service worker), it is likely that the
         //index.php file will be available even without internet, so do the following validation
         if (xhr.status >= 200 && xhr.status < 304) {
             console.log('On line!');
         } else {
             console.log('Offline :(');
         }
     }
}

其他回答

正如olliej所说,使用导航器。在线浏览器属性比发送网络请求更可取,因此developer.mozilla.org/En/Online_and_offline_events甚至被旧版本的Firefox和IE支持。

最近,WHATWG已经指定了在线和离线事件的添加,以防您需要在导航器上进行反应。在线更改。

请注意Daniel Silveira发布的链接,他指出依赖这些信号/属性与服务器同步并不总是一个好主意。

window.navigator.onLine

是你要找的,但这里要添加的东西很少,首先,如果它是你想要持续检查的应用程序上的一些东西(比如看看用户是否突然脱机,在这种情况下大多数时候是正确的,那么你也需要监听变化),为此你添加事件监听器到窗口来检测任何变化,为了检查用户是否脱机,你可以这样做:

window.addEventListener("offline", 
  ()=> console.log("No Internet")
);

检查是否在线:

window.addEventListener("online", 
  ()=> console.log("Connected Internet")
);

导航器等方法的问题。onLine是他们不兼容的一些浏览器和移动版本,一个选项,帮助我很多是使用经典的XMLHttpRequest方法,也预见到可能的情况下,文件存储在缓存响应XMLHttpRequest。Status大于200小于304。

这是我的代码:

 var xhr = new XMLHttpRequest();
 //index.php is in my web
 xhr.open('HEAD', 'index.php', true);
 xhr.send();

 xhr.addEventListener("readystatechange", processRequest, false);

 function processRequest(e) {
     if (xhr.readyState == 4) {
         //If you use a cache storage manager (service worker), it is likely that the
         //index.php file will be available even without internet, so do the following validation
         if (xhr.status >= 200 && xhr.status < 304) {
             console.log('On line!');
         } else {
             console.log('Offline :(');
         }
     }
}

HTML5应用程序缓存API指定导航器。onLine,目前在IE8测试版中可用,WebKit(例如。Safari)的夜间运行,并且已经在Firefox 3中得到支持

下面是我拥有的一个辅助实用程序片段。这是带名称空间的javascript:

network: function() {
    var state = navigator.onLine ? "online" : "offline";
    return state;
}

你应该使用这个方法检测,否则发射一个'替代'的方式来做这件事。这将是我们所需要的全部。其他的方法是hack。