语言►JavaScript►window

如何使用JavaScript判断设备的网络状态

本文作者: jsweibo

本文链接: https://jsweibo.github.io/2019/10/30/%E5%A6%82%E4%BD%95%E4%BD%BF%E7%94%A8JavaScript%E5%88%A4%E6%96%AD%E8%AE%BE%E5%A4%87%E7%9A%84%E7%BD%91%E7%BB%9C%E7%8A%B6%E6%80%81/

摘要

本文主要讲述了：

  1. 原理
  2. 兼容性测试

正文

原理

当浏览器无法连接网络时，navigation.onLine将返回false；但navigation.onLine返回true时，却不一定表示浏览器能够连接网络（有可能是虚拟网卡的影响）

当navigation.onLine变为true时，window的online事件将触发；当navigation.onLine变为false时，window的offline事件将触发

兼容性测试

示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!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>
    <script>
      window.addEventListener('load', function () {
        const foo = document.createElement('div');
        foo.textContent = navigator.userAgent;
        document.body.appendChild(foo);
        document.body.appendChild(document.createElement('hr'));
      });
    </script>
    <script>
      window.addEventListener('load', function () {
        document.body.append('onLine' in navigator);
        document.body.append('\n');
        document.body.append('ononline' in window);
        document.body.append('\n');
        document.body.append('onoffline' in window);
        document.body.append('\n');
      });
    </script>
  </body>
</html>
System Browser Name Browser Version navigator.onLine window.ononline window.onoffline
Windows 10 IE 11.0 true true true
Windows 10 Edg 83.0.478.50 true true true
Windows 10 Firefox 77.0 true true true
Windows 10 Chrome 83.0.4103.106 true true true
Android Firefox 68.0 true true true
Android EdgA 44.11.2.4122 true true true
Android MiuiBrowser 11.0.10 true true true
Android MQQBrowser 10.5 true true true
Android 360 浏览器 9.0.0.148 true true true
Android UCBrowser 13.0.2.1082 true true true
iOS Safari 12.1.2 true true true

参考资料

本文作者: jsweibo

本文链接: https://jsweibo.github.io/2019/10/30/%E5%A6%82%E4%BD%95%E4%BD%BF%E7%94%A8JavaScript%E5%88%A4%E6%96%AD%E8%AE%BE%E5%A4%87%E7%9A%84%E7%BD%91%E7%BB%9C%E7%8A%B6%E6%80%81/

本文对你有帮助？请支持我

支付宝
微信