HTML5 提供了 navigator.onLine API 来判断网络状态。它是一个布尔值属性，当浏览器在线时返回 true，离线时返回 false。 然而，它有一些局限性，仅仅检测浏览器是否连接到网络，并不一定意味着网络连接有效或可以访问互联网。例如，连接到本地网络但无法访问互联网时，它仍然返回 true。
为了更精确地检测网络连接状态，推荐使用 online 和 offline 事件监听器。
以下是一个综合示例，演示如何使用 navigator.onLine 属性和事件监听器来检测网络状态：
<!DOCTYPE html>
<html>
<head>
<title>网络状态检测</title>
<script>function updateOnlineStatus(event) {var condition = navigator.onLine ? "online" : "offline";document.getElementById("status").innerHTML = "当前网络状态: " + condition;console.log("网络状态改变: " + condition);}window.addEventListener('online', updateOnlineStatus);window.addEventListener('offline', updateOnlineStatus);window.onload = function() {updateOnlineStatus(); // 页面加载时立即检测一次};
</script>
</head>
<body><h1>网络状态检测</h1><p id="status">检测中...</p>
</body>
</html>
代码解释:
navigator.onLine: 用于获取当前的网络状态（在线或离线）。online和offline事件: 当网络状态发生变化时触发。addEventListener: 用于监听online和offline事件。updateOnlineStatus函数: 更新页面上的状态显示，并在控制台输出当前网络状态。- 页面加载时调用
updateOnlineStatus(): 确保页面加载完成后立即显示当前网络状态。
更精确的检测方法（结合 AJAX 请求）：
虽然上述方法可以检测连接状态的变化，但仍然不能保证网络连接的有效性。为了更精确地判断，可以结合 AJAX 请求来测试网络连接。
function checkConnection() {var img = new Image();img.onload = function() {console.log("网络连接正常");document.getElementById("status").innerHTML = "网络连接正常";};img.onerror = function() {console.log("网络连接异常");document.getElementById("status").innerHTML = "网络连接异常";};img.src = "https://www.google.com/favicon.ico?t=" + Date.now(); // 添加时间戳防止缓存
}// 定期检查网络连接
setInterval(checkConnection, 5000); // 每5秒检查一次
这个例子尝试加载一个小的图片资源 (Google 的 favicon)。如果加载成功，则网络连接正常；如果加载失败，则网络连接异常。 通过添加时间戳到 URL 末尾，可以避免浏览器缓存图片，确保每次都进行实际的网络请求。
通过结合事件监听和 AJAX 请求，可以更全面、更准确地判断网络连接状态，并根据不同的状态做出相应的处理。
