H5API：检测网络连接

最新推荐文章于 2025-04-23 23:34:23 发布

原创最新推荐文章于 2025-04-23 23:34:23 发布 · 929 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#html5 #javascript

本文探讨了H5的online和offline事件在Win10环境下无法正确触发的问题，以及window.navigator.onLine属性在特定情况下返回值不准确的情况。通过示例代码展示了网页如何监听网络状态变化，但实际测试中在网络断开时未收到预期的事件响应。

h5新增事件：online 网络连接时触发、 offline 网络断开时触发

网络检测：window.navigator.onLine 返回当前网络状态布尔型

【win10 在插网线使用宽带连接的情况下，关闭wlan 启动飞行模式断开宽带连接、测试获取的值为true， h5事件也无法触发】

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script type="text/javascript" src='js/jquery.min.js'></script>
	<script type="text/javascript">
		$(function(){
			//网络连接检测
			alert(window.navigator.onLine);
			//网络连接触发事件====win10宽带连接没反应
			window.ononline = function(){
				alert('网络连接');
			}
			//网络断开触发事件
			window.onoffline = function(){
				alert('网络断开');
			}


			// window.addEventListener('online',function(){
			// 	alert('网络连接');
			// });
			// window.addEventListener('offline',function(){
			// 	alert('网络断开');
			// });
		});
	</script>
</head>
<body>
	<p>网络已经连接</p>
</body>
</html>