js在浏览器中判断当前网络状态

1. 使用 Navigator onLine 属性

Navigator onLine 属性判断浏览器是否在线，在线返回 true，离线返回 false；
Navigator onLine 是只读属性，所有主流浏览器都支持 onLine 属性；

if (window.navigator.onLine) {
  console.log('网络正常！');
} else {
  console.log('网络中断！');
}

缺点： 不能及时的监听到网络断开还是连接，需要刷新页面才行

2. 使用 ononline、onoffline 事件

这两个方法属于 “侦听器”，在网络连接 / 断开的瞬间会触发（当网络从离线变为在线或从在线变为离线时,分别触发这两个事件）。
注意：检测 ononline 事件,要绑定在 window 对象上；

<script type="text/javascript">
  if (window.addEventListener) {  
    window.addEventListener("online", () => {  
      console.log('网络连接恢复');
    }, true);  
    window.addEventListener("offline", () => {  
      console.log('网络连接中断');
    }, true);   
  }else if (window.attachEvent) {  
    window.attachEvent("ononline", () => {  
      console.log('网络连接恢复');
    });  
    window.attachEvent("onoffline", () => {  
      console.log('网络连接中断');
    }); 
  }else {  
    window.ononline = () => {  
      console.log('网络连接恢复');
    };  
    window.onoffline = () => {
      console.log('网络连接中断');
    }; 
  } 
</script> 

navigator.onLine 和 online、offline事件，只能判断无线和网线是否连接，而不能进一步判断该网络是否能够上网。

3.发送请求到一个已知的服务器

function ping(url, timeout, callback) {
  var start = (new Date()).getTime();
  var xhr = new XMLHttpRequest();
  xhr.open('GET', url, true);
  xhr.timeout = timeout;
  xhr.onload = function() {
    var time = (new Date()).getTime() - start;
    callback(true, time);
  };
  xhr.onerror = function() {
    callback(false);
  };
  xhr.send();
}

ping('https://www.example.com', 3000, function(status, time) {
  if (status) {
    // 有网络连接
  } else {
    // 没有网络连接
  }
});