1. 使用 Navigator onLine 属性
Navigator onLine 属性判断浏览器是否在线，在线返回 true，离线返回 false；
Navigator onLine 是只读属性，所有主流浏览器都支持 onLine 属性；
if (window.navigator.onLine) {
console.log('网络正常！');
} else {
console.log('网络中断！');
}
2. 使用 ononline、onoffline 事件
这两个方法属于 “侦听器”，在网络连接 / 断开的瞬间会触发（当网络从离线变为在线或从在线变为离线时,分别触发这两个事件）。
注意：检测 ononline 事件,要绑定在 window 对象上；
| 兼容 | 不兼容 | |
|---|---|---|
| attachEvent | IE7、IE8 | firefox、chrome、IE9、IE10、IE11、safari、opera |
| addEventListener | firefox、chrome、IE、safari、opera | IE7、IE8 |
完整代码：文章来源：https://www.toymoban.com/news/detail-821076.html
<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 取得初始的状态，然后通过ononline、onoffline 事件来确定网络连接状态是否变化。
一个缺点：navigator.onLine 和 online、offline事件却不是万能的，只能判断无线和网线是否连接，而不能进一步判断该网络是否能够上网。文章来源地址https://www.toymoban.com/news/detail-821076.html
到了这里，关于JavaScript中 判断网络状态的几种方法的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
