本文介绍JavaScript中判断网络连接的两种主要方式：利用navigator.onLine属性获取当前状态，以及通过监听window对象的online和offline事件捕捉连接变化。文章指出该方法仅能检测物理链路连通性，无法验证实际互联网访问能力，并提供了兼容主流浏览器的完整代码示例。
1. 使用 Navigator onLine 属性
通过 Navigator onLine 属性可以判断浏览器当前的在线状态，若处于在线状态则返回 true，离线状态则返回 false。
该属性为只读属性，且已被所有主流浏览器广泛支持。
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 |
完整代码：
<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 事件并非万能，它们仅能检测无线网卡或网线等物理连接是否接通，而无法进一步判断该网络是否具备实际访问互联网的能力。
以上就是JavaScript中判断网络状态的几种方法的详细内容，更多关于JavaScript判断网络状态的资料请关注本站其它相关文章！