Rumah > hujung hadapan web > tutorial js > javascript如何检测网络

javascript如何检测网络

藏色散人
Lepaskan: 2023-01-06 11:14:10
asal
8579 orang telah melayarinya

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>
Salin selepas log masuk

在这里插入图片描述

二、想要监听浏览器的联网状态, 使用window.ononline和window.onoffline事件:

<script type="text/javascript">
    window.addEventListener("offline",function(){alert("网络连接恢复");})
    window.addEventListener("online",function(){alert("网络连接中断");})
</script>
Salin selepas log masuk

或者:

<script type="text/javascript">
    window.ononline=function(){alert("网络连接恢复");}
    window.onoffline=function(){alert("网络连接中断");}
</script>
Salin selepas log masuk

在这里插入图片描述
注意:此方法属于 “侦听器”,在网络连接 / 断开的一瞬间,才会触发。

总结:navigator.onLineonlineoffline事件却不是万能的,在 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>
Salin selepas log masuk

注意,检测 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>
Salin selepas log masuk

当然这种方法也不是很完美,而且不是很实用,无法很好的区分是服务器出现故障还是用户的网络有问题,但是这确实最有效的方式。

Atas ialah kandungan terperinci javascript如何检测网络. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan