자바스크립트가 네트워크를 감지하는 방법

JavaScript로 네트워크를 감지하는 방법: 1. 탐색기를 통해 네트워크를 감지합니다. 2. "window.ononline" 및 'window.onoffline' 이벤트를 사용하여 브라우저의 네트워킹 상태를 모니터링합니다. 3. ajax 요청을 통해 네트워크를 감지합니다.

이 문서의 운영 환경: Windows 7 시스템, JavaScript 버전 1.8.5, DELL G3 컴퓨터

JavaScript로 네트워크 상태 확인

1. 일반적으로 HTML5는 네트워크 상태를 확인하는 데 사용됩니다.

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

2. 브라우저의 네트워킹 상태를 모니터링하려면 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 이벤트를 감지하려면 창 개체에 바인딩되어야 합니다.

attachEvent - 호환 가능: IE7, IE8, Firefox, Chrome, IE9, IE10과 호환되지 않습니다. , IE11 , safari, Opera
addEventListener - 호환 가능: firefox, chrome, IE, safari, Opera; IE7, IE8

권장 학습: "javascript 고급 튜토리얼"

세 번째, 시작할 수 있습니다. ajax 요청은 요청 결과에 따라 네트워크 연결 여부를 결정합니다

<script>
	$.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>

물론 이 방법은 완벽하지도 않고 그다지 실용적이지 않습니다. 서버에 문제가 있는지 사용자의 네트워크에 문제가 있는지 잘 구분할 수 없습니다. 그러나 이것은 실제로 가장 효과적인 방법입니다.

위 내용은 자바스크립트가 네트워크를 감지하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!