使用 JS 取得目前的網路連線狀態，及事件監聽

使用 JS 當中的 navigator.onLine，可以用來取得目前的連線狀態。

另外關於事件監聽的部份，可撰寫以下原始碼來監聽 onine 事件及 offline 事件：

window.addEventListener("online", function(){
  console.log("恢復網路連線時，觸發 online 事件");
});

window.addEventListener("offline", function(){
  console.log("失去網路連線時，觸發 offline 事件");
});

實際測試

可關掉網路連線、恢復網路連線，然後觀察以下的文字：

目前的網路連線狀態：

實際測試的原始碼如下：

$(function(){ // DOMContentLoaded 事件

  if(navigator.onLine){ // 目前的網路連線狀態
    $("#network_status").removeAttr("class").addClass("have_network").html("有網路連線");
  }else{
    $("#network_status").removeAttr("class").addClass("no_network").html("無網路連線");
  }
 
});
window.addEventListener("online", function(){ // 有網路連線時，觸發 online 事件
  $("#network_status").removeAttr("class").addClass("have_network").html("有網路連線");
});
window.addEventListener("offline", function(){ // 沒有網路連線時，觸發 offline 事件
  $("#network_status").removeAttr("class").addClass("no_network").html("無網路連線");
});