javascript技巧

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript技巧 > JavaScript判断网络状态

JavaScript中判断网络状态的几种方法

作者:明天也要努力

这篇文章主要介绍了如何使用JavaScript的`navigator.onLine`属性和`ononline`、`onoffline`事件来检测浏览器的在线状态,并提供了兼容性代码示例,需要的朋友可以参考下

1. 使用 Navigator onLine 属性

Navigator onLine 属性判断浏览器是否在线,在线返回 true,离线返回 false;

Navigator onLine 是只读属性,所有主流浏览器都支持 onLine 属性;

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

2. 使用 ononline、onoffline 事件

这两个方法属于 “侦听 器”,在网络连接 / 断开的瞬间会触发(当网络从离线变为在线或从在线变为离线时,分别触发这两个事件)。

注意:检测 ononline 事件,要绑定在 window 对象上;

兼容不兼容
attachEventIE7、IE8firefox、chrome、IE9、IE10、IE11、safari、opera
addEventListenerfirefox、chrome、IE、safari、operaIE7、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判断网络状态的资料请关注脚本之家其它相关文章!

您可能感兴趣的文章:
阅读全文