Ubuntu环境下Chrome等浏览器离线/在线事件监听失效求助

问题说明 #

• 监听window.online/window.offline事件的代码在部分设备正常运行，但Ubuntu 23.10系统中仅Firefox能正常触发事件
• Chrome（122.0.6261.94及最新版）、Opera、Brave、Edge等Chrome系浏览器，开启飞行模式时无事件响应，但通过浏览器网络面板手动设置“离线”时事件正常触发
• 无任何报错信息，需要实现无网络连接时弹出提示的功能

原测试代码 #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
</head>
<body>
Testing: <span id="status">Not Detected! </span>
</body>
<script>
window.addEventListener("offline", function (e) {
    alert("offline");
});
window.addEventListener("online", function (e) {
    alert("online");
});
// window.addEventListener("load", (event) => {
//   setInterval(() => {
//     const statusDisplay = document.getElementById("status");
//     statusDisplay.textContent = navigator.onLine ? "Online" : "OFFline";
//   }, 100);
// });
</script>
</html>

解决方案 #

方案1：轮询+主动网络检测（兼容所有浏览器） #

Chrome系在Ubuntu下可能未正确同步飞行模式的网络状态，navigator.onLine仅能检测系统网络接口，无法确保实际联网。结合主动检测可解决此问题：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>网络状态检测</title>
    <style>
        .status { padding: 10px; border-radius: 5px; margin: 10px 0; }
        .online { background: #d4edda; color: #155724; }
        .offline { background: #f8d7da; color: #721c24; }
    </style>
</head>
<body>
Testing: <span id="status" class="status">检测中...</span>
</body>
<script>
const statusDisplay = document.getElementById("status");
let lastOnlineStatus = navigator.onLine;

// 主动检测网络连通性
async function checkNetwork() {
    try {
        // 用HEAD请求访问可靠地址，避免跨域和缓存
        await fetch("https://www.cloudflare.com/cdn-cgi/trace", {
            method: "HEAD",
            mode: "no-cors",
            cache: "no-store"
        });
        return true;
    } catch {
        return false;
    }
}

// 更新状态并触发提示
async function updateStatus() {
    const isOnline = await checkNetwork();
    
    if (isOnline !== lastOnlineStatus) {
        lastOnlineStatus = isOnline;
        statusDisplay.textContent = isOnline ? "在线" : "离线";
        statusDisplay.className = `status ${isOnline ? "online" : "offline"}`;
        alert(isOnline ? "网络已恢复" : "网络连接中断");
    }
}

// 初始检测+定时轮询（可调整间隔，建议3-10秒）
updateStatus();
setInterval(updateStatus, 5000);

// 保留原生事件作为补充
window.addEventListener("offline", () => {
    if (!lastOnlineStatus) return;
    lastOnlineStatus = false;
    statusDisplay.textContent = "离线";
    statusDisplay.className = "status offline";
    alert("网络连接中断");
});

window.addEventListener("online", () => {
    if (lastOnlineStatus) return;
    updateStatus(); // 主动验证避免系统误报
});
</script>
</html>

方案2：Network Information API补充（现代浏览器支持） #

部分现代浏览器支持navigator.connection，可监听网络类型变化辅助检测，需配合方案1使用：

if (navigator.connection) {
    navigator.connection.addEventListener("change", updateStatus);
}

关键提示 #

• Chrome系在Ubuntu 23.10下的飞行模式状态同步存在问题，原生事件无法触发
• 主动检测网络连通性可绕过系统状态同步的缺陷，确保结果准确
• 轮询间隔不宜过短，避免过多请求占用资源

内容的提问来源于stack exchange，提问作者Sumit Dhakad