JavaScript 如何偵測並回應網路連線變化？

在JavaScript 中偵測網路連線：綜合指南

在現今的Web 開發環境中，確保穩健可靠的使用者體驗通常取決於偵測網路連線是離線還是活動。幸運的是，JavaScript 提供了多種方法來實現這項關鍵功能。

介紹window.navigator.onLine 屬性

現在大多數主流瀏覽器都支援window.navigator.onLine 屬性，一個布林值，指示互聯網連接的當前狀態。存取此屬性可檢查使用者是否已連接至網際網路。

console.log('Initially ' + (window.navigator.onLine ? 'on' : 'off') + 'line');

監聽連線事件

瀏覽器也為線上和離線事件提供事件監聽器，當連線狀態改變時觸發。透過監聽這些事件，您可以即時回應變更。

window.addEventListener('online', () => console.log('Became online'));
window.addEventListener('offline', () => console.log('Became offline'));

透過點擊驗證連線狀態

示範這些方法的實際應用，建立一個HTML 按鈕，當按一下按鈕時，檢查並顯示目前的window.navigator.onLine value:

<button>

document.getElementById('statusCheck').addEventListener('click', () => console.log('window.navigator.onLine is ' + window.navigator.onLine));

其他注意事項

• 由於快取和websockets，window.navigator.onLine 屬性可能並不總是準確反映實際連線狀態。
• 使用伺服器端 API （例如 fetch() API）並定期監控它們的回應可以補充客戶端方法以提高可靠性。

以上是JavaScript 如何偵測並回應網路連線變化？的詳細內容。更多資訊請關注PHP中文網其他相關文章！