在 JavaScript 中检测浏览器的在线状态答案

【问题标题】：Detecting online status of the browser in JavaScript在 JavaScript 中检测浏览器的在线状态
【发布时间】：2020-01-26 14:24:09
【问题描述】：

我在移动设备和 Linux 上测试了以下代码，它正确地报告了在线状态变化。

<script>
    function updateOnlineStatus(event) {      
      onlineStatusIndicator.innerHTML = navigator.onLine ? 'online' : 'offline';
    }
    window.addEventListener('online', updateOnlineStatus);
    window.addEventListener('offline', updateOnlineStatus);
    document.addEventListener('DOMContentLoaded', () => {      
      var onlineStatusIndicator = document.querySelector(
        '#onlineStatusIndicator'
      );
      updateOnlineStatus();
    });
</script>

当我在带有以下适配器的 Windows 10 上使用它时，单独关闭 wifi 适配器不会报告离线状态。我还必须关闭 vEthernet（默认开关）和 vEthernet（Docker/NAT）才能获得预期的行为。

因此，如果打开了 hyper-v，我们就不能依赖 wifi 连接更改来检测在线/离线状态，除非我们也在 vEthernet 适配器上执行相同的连接更改。对吗？

【问题讨论】：

也许实验性的Network Information API会给你更好的结果。
@Wendelin，我用网络信息API测试过，它响应谷歌开发工具的节流变化，但对Wifi状态变化仍然没有影响。
您能否告知我们，您使用哪个浏览器以及哪个版本的浏览器在 Windows 10 上进行了测试？您的 Windows 10 操作系统的操作系统版本是什么？它可以帮助使用特定的操作系统构建和浏览器进行测试。它可以帮助缩小问题范围。
我在 Windows 10 Pro 版本 1903（内部版本 18362.592）、Chrome 版本 79.0.3945.130（官方版本）（64 位）、新 Microsoft Edge（版本 79.0.309.71（官方版本））上运行了测试（64 位））和 Firefox 72.0.2（64 位）

标签： javascript google-chrome firefox microsoft-edge

【解决方案1】：

只要浏览器连接网络的能力发生变化，Navigator.onLine 属性就会发送更新。当用户点击链接或脚本请求远程页面时，会发生更新。例如，当用户在失去互联网连接后不久单击链接时，该属性应返回 false。

浏览器实现此属性的方式不同。

在 Chrome 和 Safari 中，如果浏览器无法连接到局域网 (LAN) 或路由器，则它处于离线状态；所有其他条件都返回 true。因此，虽然您可以假设浏览器在返回 false 值时处于脱机状态，但您不能假设 true 值必然意味着浏览器可以访问互联网。您可能会得到误报，例如在计算机运行的虚拟化软件具有始终“连接”的虚拟以太网适配器的情况下。因此，如果你真的想确定浏览器的在线状态，你应该开发额外的检查手段。

在 Firefox 和 Internet Explorer 中，将浏览器切换到离线模式会发送一个 false 值。在 Firefox 41 之前，所有其他条件都返回真值；在 Windows 上测试 Nightly 68 的实际行为表明，它只寻找 LAN 连接，如 Chrome 和 Safari，会出现误报。

参考：

Navigator.onLine

【讨论】：