### 实现 HTML5
网络状态检测与在线离线功能
HTML5 提供了 `navigator.onLine` 属性
和 `online/offline` 事件，用于检测用户的
网络状态并响应
网络状态的变化。以下是实现这一功能的详细说明：
#### 1. 使用 `navigator.onLine` 检测当前
网络状态
`navigator.onLine` 是一个布尔值属性，用于
判断用户当前是否处于在线状态。如果返回 `true`，表示设备连接到
网络；如果返回 `false`，表示设备未连接到
网络[^1]。
```javascript
if (navigator.onLine) {
console.log("当前设备已连接到
网络");
} else {
console.log("当前设备未连接到
网络");
}
```
#### 2. 监听 `online`
和 `offline` 事件
为了实时响应
网络状态的变化，可以通过监听 `online`
和 `offline` 事件来获取最新的
网络状态。这些事件会在
网络状态发生变化时触发，并沿着 DOM 树冒泡传播，因此可以绑定到 `document` 或 `window` 对象上[^2]。
```javascript
// 监听 offline 事件
window.addEventListener('offline', function () {
console.log("设备已断开
网络连接");
});
// 监听 online 事件
window.addEventListener('online', function () {
console.log("设备已重新连接到
网络");
});
```
#### 3. 综合实现示例
以下是一个完整的示例代码，展示如何结合 `navigator.onLine`
和 `online/offline` 事件来动态更新页面内容。
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>
网络状态检测</title>
<style>
#status.ONLINE { color: green; }
#status.OFFLINE { color: red; }
</style>
</head>
<body onload="loaded()">
<h1>
网络状态检测</h1>
<p id="status">加载中...</p>
<p id="state">未知</p>
<pre id="log"></pre>
<script>
function updateOnlineStatus(msg) {
var status = document.getElementById("status");
var condition = navigator.onLine ? "ONLINE" : "OFFLINE";
status.setAttribute("class", condition);
var state = document.getElementById("state");
state.innerHTML = condition;
var log = document.getElementById("log");
log.appendChild(document.createTextNode("Event: " + msg + "; status=" + condition + "\n"));
}
function loaded() {
updateOnlineStatus("load");
document.body.addEventListener("offline", function () {
updateOnlineStatus("offline");
}, false);
document.body.addEventListener("online", function () {
updateOnlineStatus("online");
}, false);
}
</script>
</body>
</html>
```
#### 注意事项
1. **局限性**：`navigator.onLine` 只能反映设备是否连接到
网络，但无法保证
网络的实际可用性。例如，即使设备连接到 Wi-Fi，但如果路由器未连接到互联
网，`navigator.onLine` 仍可能返回 `true`[^2]。
2. **跨浏览器兼容性**：大多数现代浏览器支持 `navigator.onLine`
和 `online/offline` 事件，但在某些老旧浏览器中可能存在兼容性问题。
这是一个用于检查Android设备网络连接状态的工具类，通过Context获取ConnectivityManager，再获取activeNetworkInfo来判断网络是否可用。
扫一扫
4140
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
