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

Question

我已经在移动设备上测试了以下代码，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>

当我在 Windows10 上使用以下适配器时，单独关闭 wifi 适配器并没有报告离线状态。我还必须关闭 vEthernet(Default Switch) 和 vEthernet(Docker/NAT) 才能获得预期的行为。

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

Answer 1

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

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

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

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

参考：

Navigator.onLine

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

Detecting online status of the browser in JavaScript

javascript

firefox

google-chrome

microsoft-edge