檢測到Internet連接處於脫機狀態？

Question

如何檢測Internet連接在JavaScript中處於脫機狀態？

Answer 1

您可以確定該連接是通過使失敗XHR請求丟失。

的標準方法是給重試該請求幾次。如果沒有通過，提醒用戶檢查連接，並無法正常。

旁註：爲了把整個應用程序處於「離線」狀態可能導致大量的處理狀態容易出錯的工作..無線連接可能會來來去去，等於是你最好的選擇可能是隻是優雅地失敗，保存數據，並提醒用戶..允許，如果有一個他們最終解決連接問題，並繼續使用你的應用程序有相當數量的寬恕。

旁註：你可以檢查一個可靠的網站，如谷歌的連接，但只是試圖讓自己的要求，因爲儘管谷歌可能可用，您自己的應用程序可能不是這可能不完全是有用的，你仍然需要處理自己的連接問題。試圖發送ping到谷歌將是一個很好的方式來確認互聯網連接本身已關閉，所以如果這些信息對你有用，那麼它可能是值得的。

旁註：發送平安可以以同樣的方式，你會做出什麼樣雙向Ajax請求來實現，但是在發送平在這種情況下，谷歌會遇到一些挑戰。首先，我們會遇到與製作ajax通信時經常遇到的相同的跨域問題。一種選擇是建立一個服務器端的代理，其中，我們實際上ping谷歌（或其他部位），而ping的結果返回給應用程序。這是一個追趕22，因爲如果互聯網連接實際上這個問題，我們將無法到達服務器，並且如果連接問題僅在我們自己的域中，我們將無法區分這種差異。其他跨域技術，可以嘗試，例如，嵌入在頁面中的iframe指向google.com，然後投票成功/失敗的iframe（檢查內容等）。嵌入圖像可能沒有真正告訴我們什麼，因爲我們需要通信機制的有用迴應，以便對發生的事情得出一個好的結論。再次，確定整個互聯網連接的狀態可能比它的價值更麻煩。您必須針對您的特定應用重新選擇這些選項。

Answer 2

有許多方法可以做到這一點：

• AJAX請求到自己的網站。如果該請求失敗，那麼很可能是連接錯誤。 JQuery文檔有關於handling failed AJAX requests的章節。這樣做時請注意Same Origin Policy，這可能會阻止您訪問域外的網站。

• 你可以把一個onerror在img，像

  <img src='http://www.example.com/singlepixel.gif' 
       onerror='alert("Connection dead");' /> 
  

  這種方法也可能會失敗，如果源圖像移動/重命名，並通常會是一個劣質的選擇了ajax選項。

因此，有幾種不同的方式來試圖發現這一點，沒有完美的，但在沒有跳出瀏覽器沙盒中，並直接訪問該用戶的網絡連接狀態的能力，他們似乎是最好的選擇。

Answer 3

IE 8將支持window.navigator.onLine屬性。

當然，這並不與其他瀏覽器或操作系統的幫助，但。我預測其他瀏覽器廠商也會決定提供該屬性，同時考慮到在Ajax應用程序中瞭解在線/離線狀態的重要性。

在這種情況發生之前，XHR或Image()或<img>請求可以提供接近所需功能的內容。

更新（2014年11月16日）

主要瀏覽器都支持此屬性，但你的結果會有所不同。

從 Mozilla Documentation

引用：

在Chrome和Safari，如果瀏覽器不能夠連接到局域網（LAN）或一臺路由器，它處於脫機狀態;所有其他條件返回true。因此，儘管你可以假設，當它返回一個值false瀏覽器處於脫機狀態，你不能假設真值必然意味着瀏覽器可以訪問互聯網。您可能會得到誤報，例如在計算機正在運行具有始終「連接」的虛擬以太網適配器的虛擬化軟件的情況下。因此，如果你真的想確定瀏覽器的在線狀態，你應該開發額外的檢查手段。

在Firefox和Internet Explorer，切換瀏覽器到脫機模式發送false值。所有其他條件返回值爲true。

Answer 4

的HTML5應用程序緩存API指定navigator.onLine，這是目前在IE8的測試版，WebKit的（如Safari瀏覽器）Nightlies版，並在Firefox 3已經支持

Answer 5

您可以使用$.ajax()的error回調，如果請求失敗就會觸發。如果textStatus等於字符串「超時」這可能意味着連接斷開：

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

從doc：

錯誤：如果請求 失敗時調用的函數。該函數傳入三個 參數：XMLHttpRequest對象， 描述錯誤 的發生的類型和一個可選的 異常對象，如果發生一個字符串。用於第二 參數（除了空） 可能的值是「超時」， 「錯誤」，「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!'); 
     } 
    } 
}); 

Answer 6

是恢復了很多上面非常有趣的腳本：

http://www.codeproject.com/KB/scripting/InternetConnectionTest.aspx

這是非常有用的，因爲它是基於Ajax，是異步的，所以你可以檢查互聯網是否在不離開原始頁面的情況下被連接。通過計時器使用此功能，您還可以在頁面中每隔n分鐘檢查一次組件。

Answer 7

正如olliej所說，使用navigator.onLine瀏覽器屬性比發送網絡請求更好，因此與developer.mozilla.org/En/Online_and_offline_events相比，它甚至支持舊版本的Firefox和IE。

最近，WHATWG已指定添加online和offline事件，以防萬一您需要對navigator.onLine作出反應更改。

也請留意張貼由丹尼爾·西爾韋拉的鏈接，指出，依靠這些信號/屬性與服務器同步，並不總是一個好主意。

Answer 8

這裏是一個輔助工具我有一個片段。這是命名空間的javascript：

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

你應該和方法檢測其他火過這樣的「另類」的方式使用它。當這將是所有需要的時候，時間快到了。其他方法是黑客。

Answer 9

我的方式。

<!-- 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> 

Answer 10

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

Answer 11

我不得不做出一個客戶誰的作品了很多與學校的web應用程序（基於Ajax），這些學校往往有我用這個簡單的功能，以檢測是否有一個壞的互聯網連接連接，工作得很好！

我用笨和jQuery：

function checkOnline(){ 
    setTimeout("doOnlineCheck()", 20000); 
} 

function doOnlineCheck(){ 
    var submitURL = $("#base_path").val() + "index.php/menu/online";//if the server can be reached it returns 1, other wise it times out 
    $.ajax({ 
     url  : submitURL  , 
     type : 'post'  , 
     dataType: 'msg'   , 
     timeout : 5000   , 
     success : function(msg){ 
      if(msg==1){ 
       $("#online").addClass("online"); 
       $("#online").removeClass("offline"); 
      }else{ 
       $("#online").addClass("offline"); 
       $("#online").removeClass("online"); 
      } 
      checkOnline(); 
     } , 
     error : function(){ 
      $("#online").addClass("offline"); 
      $("#online").removeClass("online"); 
      checkOnline(); 
     } 
    }); 
} 

Answer 12

到域的Ajax調用是最簡單的方法來檢測，如果你是離線

這僅僅是給你的概念，它應該改進，檢查返回的HTTP狀態代碼等

Answer 13

我一直在尋找一個客戶端解決方案來檢測，如果互聯網斷了或我的服務器關閉。其他的解決方案，我發現似乎總是依賴於第三方的腳本文件或圖像，這對我來說似乎並不像它會經得起時間的考驗。外部託管的腳本或圖像將來可能會更改，並導致檢測代碼失敗。

我已經找到一種方法通過一個404碼尋找一個xhrStatus檢測到它。另外，我使用JSONP來繞過CORS限制。除404以外的狀態代碼顯示互聯網連接無法正常工作。

$.ajax({ 
    url:  'https://www.bing.com/aJyfYidjSlA' + new Date().getTime() + '.html', 
    dataType: 'jsonp', 
    timeout: 5000, 

    error: function(xhr) { 
     if (xhr.status == 404) { 
      //internet connection working 
     } 
     else { 
      //internet is down (xhr.status == 0) 
     } 
    } 
}); 

Answer 14

我認爲這是非常簡單的方法。

var x = confirm("Are you sure you want to submit?"); 
if(x){ 
    if(navigator.onLine == true) { 
     return true; 
    } else { 
     alert('Internet connection is lost'); 
     return false; 
    } 
} 
else { 
    return false; 
}