javascript如何檢測網絡-js教程-PHP中文網

javascript如何檢測網絡

藏色散人

發布： 2023-01-06 11:14:10

原創

8476 人瀏覽過

javascript偵測網路的方法：1、透過navigator去偵測網路；2、使用「window.ononline」和「window.onoffline」事件監聽瀏覽器的連網狀態；3、透過ajax請求偵測網路。

javascript如何檢測網絡

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

JavaScript 判斷網路狀態

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

<script type="text/javascript">
	// 通过window.navigator.onLine 来检测网络是否可用
    alert(window.navigator.onLine); // 返回的是一个bool值(true表示已连接,false表示未连接)
</script>

登入後複製

javascript如何檢測網絡

#二、想要監聽瀏覽器的連網狀態, 使用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>

登入後複製

javascript如何檢測網絡
#注意：此方法屬於“偵聽器”，在網路連接/ 斷開的一瞬間，才會觸發。

總結：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: &#39;https://sug.so.360.cn/suggest&#39;,
	  dataType:&#39;jsonp&#39;,
	  success: function(result){
	    console.log(&#39;网络正常&#39;)
	  }, 
	  error: function(result){
	    console.log(&#39;网络异常&#39;)
	  }
	});
</script>

登入後複製

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

以上是javascript如何檢測網絡的詳細內容。更多資訊請關注PHP中文網其他相關文章！