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


当前回答

请求头错误

$.ajax({
    url: /your_url,
    type: "POST or GET",
    data: your_data,
    success: function(result){
      //do stuff
    },
    error: function(xhr, status, error) {

      //detect if user is online and avoid the use of async
        $.ajax({
            type: "HEAD",
            url: document.location.pathname,
            error: function() { 
              //user is offline, do stuff
              console.log("you are offline"); 
              }
         });
    }   
});

其他回答

有很多方法可以做到这一点:

AJAX请求到您自己的网站。如果请求失败,很有可能是连接有问题。JQuery文档中有关于处理失败AJAX请求的章节。这样做时要注意同源策略,这可能会阻止您访问域外的网站。 你可以在img中添加一个onerror,比如<img src="http://www.example.com/singlepixel.gif" onerror="alert('Connection dead');"/ >。

如果源图像被移动/重命名,此方法也可能失败,并且通常是一个不如ajax选项的选择。

因此,有几种不同的方法来尝试和检测这种情况,没有一种是完美的,但在没有跳出浏览器沙箱并直接访问用户的网络连接状态的能力的情况下,它们似乎是最好的选择。

请求头错误

$.ajax({
    url: /your_url,
    type: "POST or GET",
    data: your_data,
    success: function(result){
      //do stuff
    },
    error: function(xhr, status, error) {

      //detect if user is online and avoid the use of async
        $.ajax({
            type: "HEAD",
            url: document.location.pathname,
            error: function() { 
              //user is offline, do stuff
              console.log("you are offline"); 
              }
         });
    }   
});

IE 8将支持window.navigator.onLine属性。

但当然,这对其他浏览器或操作系统没有帮助。考虑到了解Ajax应用程序中的在线/离线状态的重要性,我预计其他浏览器供应商也将决定提供该属性。

在此之前,XHR或Image()或<img>请求都可以提供接近您想要的功能。

更新(2014/11/16)

大多数浏览器现在都支持这个属性,但结果会有所不同。

引用自Mozilla文档:

In Chrome and Safari, if the browser is not able to connect to a local area network (LAN) or a router, it is offline; all other conditions return true. So while you can assume that the browser is offline when it returns a false value, you cannot assume that a true value necessarily means that the browser can access the internet. You could be getting false positives, such as in cases where the computer is running a virtualization software that has virtual ethernet adapters that are always "connected." Therefore, if you really want to determine the online status of the browser, you should develop additional means for checking. In Firefox and Internet Explorer, switching the browser to offline mode sends a false value. All other conditions return a true value.

导航器等方法的问题。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 :(');
         }
     }
}

您可以尝试,如果网络连接,这将返回true

function isInternetConnected(){return navigator.onLine;}