javascript中檢測(cè)網(wǎng)絡(luò)的方法

這篇文章將為大家詳細(xì)講解有關(guān)javascript中檢測(cè)網(wǎng)絡(luò)的方法，小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

javascript檢測(cè)網(wǎng)絡(luò)的方法：1、通過(guò)navigator去檢測(cè)網(wǎng)絡(luò)；2、 使用“window.ononline”和“window.onoffline”事件監(jiān)聽瀏覽器的聯(lián)網(wǎng)狀態(tài)；3、通過(guò)ajax請(qǐng)求檢測(cè)網(wǎng)絡(luò)。

本文操作環(huán)境：windows7系統(tǒng)、javascript1.8.5版，DELL G3電腦

JavaScript 判斷網(wǎng)絡(luò)狀態(tài)

一、一般來(lái)說(shuō)，判斷網(wǎng)絡(luò)狀態(tài)都是用的 HTML5 提供的 navigator 去檢測(cè)網(wǎng)絡(luò)

<script type="text/javascript">
	// 通過(guò)window.navigator.onLine 來(lái)檢測(cè)網(wǎng)絡(luò)是否可用
    alert(window.navigator.onLine); // 返回的是一個(gè)bool值(true表示已連接,false表示未連接)
</script>

二、想要監(jiān)聽瀏覽器的聯(lián)網(wǎng)狀態(tài), 使用window.ononline和window.onoffline事件:

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

或者：

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

注意：此方法屬于 “偵聽器”，在網(wǎng)絡(luò)連接 / 斷開的一瞬間，才會(huì)觸發(fā)。

總結(jié)：navigator.onLine和online、offline事件卻不是萬(wàn)能的，在 PC 端時(shí)只能判斷無(wú)線和網(wǎng)線是否連接，而不能判斷是否有網(wǎng)絡(luò)、是否可以上網(wǎng)。

更為安全的做法：

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

注意，檢測(cè) ononline 事件,要綁定在 window 對(duì)象上

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

推薦學(xué)習(xí)：《javascript高級(jí)教程》

三、可以發(fā)起 ajax 請(qǐng)求，根據(jù)請(qǐng)求結(jié)果判斷網(wǎng)絡(luò)的通斷

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

當(dāng)然這種方法也不是很完美，而且不是很實(shí)用，無(wú)法很好的區(qū)分是服務(wù)器出現(xiàn)故障還是用戶的網(wǎng)絡(luò)有問題，但是這確實(shí)最有效的方式。

關(guān)于“javascript中檢測(cè)網(wǎng)絡(luò)的方法”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，使各位可以學(xué)到更多知識(shí)，如果覺得文章不錯(cuò)，請(qǐng)把它分享出去讓更多的人看到。