快捷導(dǎo)航

JavaScript中判斷網(wǎng)絡(luò)狀態(tài)的幾種方法

更新時間：2025年02月24日 10:08:49 作者：明天也要努力

這篇文章主要介紹了如何使用JavaScript的`navigator.onLine`屬性和`ononline`、`onoffline`事件來檢測瀏覽器的在線狀態(tài),并提供了兼容性代碼示例,需要的朋友可以參考下

1. 使用 Navigator onLine 屬性

Navigator onLine 屬性判斷瀏覽器是否在線，在線返回 true，離線返回 false；

Navigator onLine 是只讀屬性，所有主流瀏覽器都支持 onLine 屬性；

if (window.navigator.onLine) {
  console.log('網(wǎng)絡(luò)正常！');
} else {
  console.log('網(wǎng)絡(luò)中斷！');
}

2. 使用 ononline、onoffline 事件

這兩個方法屬于 “偵聽器”，在網(wǎng)絡(luò)連接 / 斷開的瞬間會觸發(fā)（當網(wǎng)絡(luò)從離線變?yōu)樵诰€或從在線變?yōu)殡x線時,分別觸發(fā)這兩個事件）。

注意：檢測 ononline 事件,要綁定在 window 對象上；

	兼容	不兼容
attachEvent	IE7、IE8	firefox、chrome、IE9、IE10、IE11、safari、opera
addEventListener	firefox、chrome、IE、safari、opera	IE7、IE8

完整代碼：

<script type="text/javascript">
  if (window.addEventListener) {  
    window.addEventListener("online", () => {  
      console.log('網(wǎng)絡(luò)連接恢復(fù)');
    }, true);  
    window.addEventListener("offline", () => {  
      console.log('網(wǎng)絡(luò)連接中斷');
    }, true);   
  }else if (window.attachEvent) {  
    window.attachEvent("ononline", () => {  
      console.log('網(wǎng)絡(luò)連接恢復(fù)');
    });  
    window.attachEvent("onoffline", () => {  
      console.log('網(wǎng)絡(luò)連接中斷');
    }); 
  }else {  
    window.ononline = () => {  
      console.log('網(wǎng)絡(luò)連接恢復(fù)');
    };  
    window.onoffline = () => {
      console.log('網(wǎng)絡(luò)連接中斷');
    }; 
  } 
</script>