function checkNetworkStatus() {
return navigator.onLine;
}
function handleNetworkStatusChange() {
if (!checkNetworkStatus()) {
// 网络断开时的处理逻辑
showAlert("网络连接已断开，请检查网络设置。");
} else {
// 网络连接时的处理逻辑 (可选)
hideAlert(); // 隐藏之前的断网提示
// ... 其他逻辑，例如重新加载数据等
}
}
function showAlert(message) {
// 显示提示信息，例如：
const alertElement = document.createElement("div");
alertElement.id = "network-alert";
alertElement.textContent = message;
alertElement.style.cssText = `
position: fixed;
top: 0;
left: 0;
width: 100%;
padding: 10px;
background-color: #f44336; /* 红色背景 */
color: white;
text-align: center;
z-index: 9999;
`;
document.body.appendChild(alertElement);
}
function hideAlert() {
const alertElement = document.getElementById("network-alert");
if (alertElement) {
alertElement.remove();
}
}
// 初始状态检查
handleNetworkStatusChange();
// 监听网络状态变化
window.addEventListener('online', handleNetworkStatusChange);
window.addEventListener('offline', handleNetworkStatusChange);
// 更进一步的改进： 定期检查网络状态 (例如每隔 5 秒)
setInterval(() => {
handleNetworkStatusChange();
}, 5000);
// 更进一步的改进： 使用更友好的 UI 库来显示提示信息，例如 SweetAlert2
// 使用 SweetAlert2 的示例 (需要先引入 SweetAlert2 库):
// import Swal from 'sweetalert2'; // 如果使用模块化
// function showAlert(message) {
// Swal.fire({
// icon: 'error',
// title: '网络错误',
// text: message,
// });
// }
// function hideAlert() {
// // SweetAlert2 会自动关闭，这里不需要手动隐藏
// }
代码解释:
-
checkNetworkStatus(): 使用navigator.onLineAPI 检查当前网络状态，返回true表示在线，false表示离线。 -
handleNetworkStatusChange(): 处理网络状态变化的逻辑。如果离线，调用showAlert()显示提示信息；如果在线，调用hideAlert()隐藏提示信息，并可以执行其他逻辑（例如重新加载数据）。 -
showAlert(message): 显示网络断开的提示信息。这个例子中创建了一个简单的div元素并添加到页面顶部。你可以根据需要自定义样式和内容，或者使用更成熟的 UI 库（例如 SweetAlert2、Bootstrap 的 alerts 等）来创建更美观的提示。 -
hideAlert(): 隐藏网络断开的提示信息。 -
事件监听: 使用
window.addEventListener监听online和offline事件，以便在网络状态变化时立即做出响应。 -
定期检查 (可选): 使用
setInterval每隔一段时间检查一次网络状态，可以更及时地发现网络连接中断的情况，尤其是在online和offline事件不触发的情况下。 -
使用 SweetAlert2 (可选): 代码中注释部分展示了如何使用 SweetAlert2 来显示更友好的提示信息。你需要先安装并引入 SweetAlert2 库。
使用方法:
将这段 JavaScript 代码添加到你的 HTML 文件中，最好放在 <body> 的末尾或使用 DOMContentLoaded 事件确保在 DOM 加载完成后执行。
关键改进和最佳实践:
- 用户体验: 使用更友好的 UI 库来显示提示信息，提供更清晰的视觉反馈。
- 错误处理: 除了显示提示信息，还可以考虑更完善的错误处理机制，例如重试网络请求、缓存数据等。
- 定期检查的频率: 根据应用场景调整定期检查的频率，避免过于频繁的检查影响性能。
- 移动端兼容性: 测试代码在不同移动设备上的兼容性。
这个改进后的版本提供了更完整的功能和更好的用户体验。 记住根据你的具体需求进行调整和定制。
标签：function,handleNetworkStatusChange,用户,alertElement,网络,提示信息,时则,SweetAlert2,不通 From： https://www.cnblogs.com/ai888/p/18576485