如何用JavaScript檢測離線/線上狀態

這兩年離線瀏覽技術越來越流行，最常見的就是HTML5行動應用程式裡，有很多普通的Web app也使用了這些技術。但是，新技術的出現有時會給我們WEB開發人員額外的苦惱，例如，如何判斷用戶現在是在線上還是離線？幸好，有矛就有盾，JavaScript裡的navigator物件幫我們解決這個問題。

相關學習推薦：javascript影片教學

navigator.onLine

navigator.onLine#屬性能為我們提供一個布林值，用來判斷使用者是否連接了網路。你可以這樣存取它：

if(navigator.onLine) { // true|false
	// ...
}

沒有比這更簡單的了！

事件

我們除了能偵測這個離線/線上屬性值外，還可以綁定offline 和online事件：

function updateIndicator() {
	// 这时可以根据offline/online按钮的颜色
}

// 根据网络连接情况更新在线状态
window.addEventListener('online',  updateIndicator);
window.addEventListener('offline', updateIndicator);
updateIndicator();

當然，老式的技術裡也提供了對應的方法，在body#標記上使用ononline 和onoffline 方法。

我可以想像到很多地方都需要使用這些事件和屬性。例如一種情況，當使用者正在工作時，就斷網了，如果我們的WEB應用可以偵測出這種狀態，可以將使用者的寫作保持到本地的Web Storage裡，等網路恢復後，再提交到伺服器上，這樣，斷網將不會為使用者的寫作帶來影響。這只是一個簡單的例子，相信你能想出更多。

要提醒的是，這個API並不是那麼可靠。最古老的定時刷新的技術可以當作一種備案。

以上是如何用JavaScript檢測離線/線上狀態的詳細內容。更多資訊請關注PHP中文網其他相關文章！