可通过监听 window.navigator.onLine 状态及 online/offline 事件实现实时网络提醒；首次加载用 navigator.onLine 获取初始状态；推荐非侵入式 toast 提示，并结合 fetch 验证真实连通性提升健壮性。
可以通过监听 window.navigator.onLine 状态变化，结合 online 和 offline 事件，实现实时的网络断开与恢复提醒。
监听页面网络状态变化
浏览器原生支持 online 和 offline 两个事件，分别在联网恢复和断网时触发。注意：它们绑定在 window 对象上，不是 document。
- 使用
window.addEventListener('offline', handler)捕获断网时刻 - 使用
window.addEventListener('online', handler)捕获重连时刻 - 首次加载时可通过
navigator.onLine获取当前真实状态（但需注意：该值在某些浏览器中可能有延迟或误判）
显示友好提醒（非侵入式）
避免弹窗打断用户操作，推荐用轻量提示条（toast）或顶部 banner：
deep-java-review
下载
Java项目代码review工具。分析Git变更+完整调用链路上下文，推断业务需求，进行多维度评分和分类汇总，生成完整PRD文档。包含细粒度Java代码审查清单（Null安全、异常处理、Streams、并发、equals/hashCode、资源管理、API设计、性能、MyBatis/ORM、事务边界、SQL/DD...
- 创建一个固定定位的
<div id="network-tip">元素，初始display: none - 断网时设为
display: block; background: #e74c3c; color: white;，显示“⚠️ 网络已断开” - 恢复时改为
background: #2ecc71;，显示“✅ 已重新连接”，2 秒后自动淡出 - 可添加简单 CSS 过渡（如
opacity+transform）提升体验
增强健壮性的小技巧
navigator.onLine 并不检测真实服务器连通性，仅反映浏览器是否认为自己在线（例如关闭 WiFi 后立刻返回 false，但开启 WiFi 后可能仍需几秒才变 true）。如需更准判断：
立即学习“Java免费学习笔记（深入）”；
- 断网提示后，可在
online回调里发起一次轻量fetch('/health')或HEAD请求验证服务可达性 - 若验证失败，保持提示并重试（如间隔 3 秒最多 2 次），避免“假恢复”误导用户
- 对关键操作（如提交表单）提前检查
navigator.onLine，并给出明确拦截提示
完整简易示例代码
以下为可直接运行的核心逻辑（无需框架）：
const tip = document.createElement('div');
tip.id = 'network-tip';
tip.style.cssText = `
position: fixed; top: 0; left: 0; right: 0; padding: 12px;
text-align: center; font-size: 14px; z-index: 9999;
transition: opacity 0.3s, transform 0.3s;
`;
document.body.appendChild(tip);
const showTip = (msg, bgColor) => {
tip.textContent = msg;
tip.style.background = bgColor;
tip.style.opacity = '1';
tip.style.transform = 'translateY(0)';
setTimeout(() => {
tip.style.opacity = '0';
tip.style.transform = 'translateY(-20px)';
}, 2000);
};
window.addEventListener('offline', () => {
showTip('⚠️ 网络已断开，请检查连接', '#e74c3c');
});
window.addEventListener('online', () => {
// 可选：验证真实连通性
fetch('/health', { method: 'HEAD', cache: 'no-store' })
.then(() => showTip('✅ 已重新连接', '#2ecc71'))
.catch(() => showTip('⚠️ 已联网，但服务暂不可用', '#f39c12'));
});
// 页面加载时检查初始状态
if (!navigator.onLine) {
showTip('⚠️ 当前似乎没有网络连接', '#e74c3c');
}
