Navigator onLine 属性

Navigator 对象的 onLine 属性用于检测浏览器是否在线。当用户处于在线状态时，该属性返回 true；反之，则返回 false。

检测浏览器在线状态

你可以使用 navigator.onLine 属性来检查当前浏览器是否处于在线状态。这个属性是只读的，这意味着你不能通过它改变浏览器的在线状态。

if (navigator.onLine) {
    console.log("您现在处于在线状态");
} else {
    console.log("您现在处于离线状态");
}

注意事项

• 浏览器兼容性：大部分现代浏览器都支持 navigator.onLine 属性，但在一些旧版本浏览器中可能不被支持。
• 网络变化检测：虽然 navigator.onLine 可以告诉你当前是否在线，但它并不能检测到网络连接的变化。例如，从有线网络切换到无线网络时，浏览器不会自动更新 navigator.onLine 的值。

离线事件和在线事件

为了更好地处理网络状态的变化，你可以监听 window 对象上的 online 和 offline 事件。这些事件会在网络状态发生变化时触发。

监听在线事件

当浏览器从离线状态变为在线状态时，会触发 online 事件。

window.addEventListener('online', function(event) {
    console.log("网络已恢复");
});

监听离线事件

当浏览器从在线状态变为离线状态时，会触发 offline 事件。

window.addEventListener('offline', function(event) {
    console.log("网络已断开");
});

实际应用示例

下面是一个简单的示例，展示如何在用户尝试提交表单之前检查网络连接情况：

// www.javascriptcn.com code example
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>在线状态检测</title>
</head>
<body>
    <form id="myForm">
        <label for="username">用户名:</label>
        <input type="text" id="username" name="username">
        <button type="submit">提交</button>
    </form>

    <script>
        document.getElementById('myForm').addEventListener('submit', function(event) {
            if (!navigator.onLine) {
                event.preventDefault();
                alert("请检查您的网络连接！");
            }
        });

        window.addEventListener('online', function(event) {
            alert("网络已恢复，您可以继续操作了");
        });

        window.addEventListener('offline', function(event) {
            alert("网络已断开，请检查您的网络连接");
        });
    </script>
</body>
</html>

在这个例子中，如果用户尝试在离线状态下提交表单，JavaScript 将阻止表单提交，并提示用户检查网络连接。同时，我们还添加了对 online 和 offline 事件的监听，以便在用户的网络状态发生变化时及时通知用户。

通过以上介绍，你应该能够理解并使用 navigator.onLine 属性来检测和响应用户的网络连接状态了。