javascript中檢測網絡的方法

這篇文章將為大家詳細講解有關javascript中檢測網絡的方法，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

javascript檢測網絡的方法：1、通過navigator去檢測網絡；2、 使用“window.ononline”和“window.onoffline”事件監聽瀏覽器的聯網狀態；3、通過ajax請求檢測網絡。

本文操作環境：windows7系統、javascript1.8.5版，DELL G3電腦

JavaScript 判斷網絡狀態

一、一般來說，判斷網絡狀態都是用的 HTML5 提供的 navigator 去檢測網絡

<script type="text/javascript">
	// 通過window.navigator.onLine 來檢測網絡是否可用
    alert(window.navigator.onLine); // 返回的是一個bool值(true表示已連接,false表示未連接)
</script>

二、想要監聽瀏覽器的聯網狀態, 使用window.ononline和window.onoffline事件:

<script type="text/javascript">
    window.addEventListener("offline",function(){alert("網絡連接恢復");})
    window.addEventListener("online",function(){alert("網絡連接中斷");})
</script>

或者：

<script type="text/javascript">
    window.ononline=function(){alert("網絡連接恢復");}
    window.onoffline=function(){alert("網絡連接中斷");}
</script>

注意：此方法屬于 “偵聽器”，在網絡連接 / 斷開的一瞬間，才會觸發。

總結：navigator.onLine和online、offline事件卻不是萬能的，在 PC 端時只能判斷無線和網線是否連接，而不能判斷是否有網絡、是否可以上網。

更為安全的做法：

<script type="text/javascript">
	var el = document.body;  
	if (el.addEventListener) {  
	   window.addEventListener("online", function () {  
	     alert("網絡連接恢復");}, true);  
	   window.addEventListener("offline", function () {  
	     alert("網絡連接中斷");}, true);  
	}  
	else if (el.attachEvent) {  
	   window.attachEvent("ononline", function () {  
	     alert("網絡連接恢復");});  
	   window.attachEvent("onoffline", function () {  
	     alert("網絡連接中斷");});  
	}  
	else {  
	   window.ononline = function () {  
	     alert("網絡連接恢復");};  
	   window.onoffline = function () {  
	     alert("網絡連接中斷");};  
	}  
</script>

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

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

推薦學習：《javascript高級教程》

三、可以發起 ajax 請求，根據請求結果判斷網絡的通斷

<script type="text/javascript">
	$.ajax({
	  url: 'https://sug.so.#/suggest',
	  dataType:'jsonp',
	  success: function(result){
	    console.log('網絡正常')
	  }, 
	  error: function(result){
	    console.log('網絡異常')
	  }
	});
</script>

當然這種方法也不是很完美，而且不是很實用，無法很好的區分是服務器出現故障還是用戶的網絡有問題，但是這確實最有效的方式。

關于“javascript中檢測網絡的方法”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。