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


当前回答

您可以使用$.ajax()的错误回调,它在请求失败时触发。如果textStatus等于字符串"timeout",这可能意味着连接中断:

function (XMLHttpRequest, textStatus, errorThrown) {
  // typically only one of textStatus or errorThrown 
  // will have info
  this; // the options for this ajax request
}

医生说:

错误:一个函数被调用,如果请求 失败。函数被传递了3个 参数:XMLHttpRequest对象 描述错误类型的字符串 这是可选的 异常对象,如果发生。 第二个可能的值 参数(除null外)为"timeout", "error", "notmodified"和 “parsererror”。这是一个Ajax事件

例如:

 $.ajax({
   type: "GET",
   url: "keepalive.php",
   success: function(msg){
     alert("Connection active!")
   },
   error: function(XMLHttpRequest, textStatus, errorThrown) {
       if(textStatus == 'timeout') {
           alert('Connection seems dead!');
       }
   }
 });

其他回答

我的方式。

<!-- the file named "tt.jpg" should exist in the same directory -->

<script>
function testConnection(callBack)
{
    document.getElementsByTagName('body')[0].innerHTML +=
        '<img id="testImage" style="display: none;" ' +
        'src="tt.jpg?' + Math.random() + '" ' +
        'onerror="testConnectionCallback(false);" ' +
        'onload="testConnectionCallback(true);">';

    testConnectionCallback = function(result){
        callBack(result);

        var element = document.getElementById('testImage');
        element.parentNode.removeChild(element);
    }    
}
</script>

<!-- usage example -->

<script>
function myCallBack(result)
{
    alert(result);
}
</script>

<a href=# onclick=testConnection(myCallBack);>Am I online?</a>

只需使用导航器。如果这是真的,那么你是在线的,否则离线

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

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

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

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

 if(navigator.onLine){
  alert('online');
 } else {
  alert('offline');
 }

请求头错误

$.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"); 
              }
         });
    }   
});