javascript如何检测网络-木庄网络博客

本文摘自PHP中文网，作者藏色散人，侵删。

javascript检测网络的方法：1、通过navigator去检测网络；2、使用“window.ononline”和“window.onoffline”事件监听浏览器的联网状态；3、通过ajax请求检测网络。

本文操作环境：windows7系统、javascript1.8.5版，DELL G3电脑

JavaScript 判断网络状态

一、一般来说，判断网络状态都是用的 HTML5 提供的 navigator 去检测网络

<script type="text/javascript">
    // 通过window.navigator.onLine 来检测网络是否可用
    alert(window.navigator.onLine); // 返回的是一个bool值(true表示已连接,false表示未连接)
</script>

在这里插入图片描述

二、想要监听浏览器的联网状态, 使用window.ononline和window.onoffline事件:

<script type="text/javascript">
    window.addEventListener("offline",function(){alert("网络连接恢复");})
    window.addEventListener("online",function(){alert("网络连接中断");})
</script>

或者：

<script type="text/javascript">
    window.ononline=function(){alert("网络连接恢复");}
    window.onoffline=function(){alert("网络连接中断");}
</script>

在这里插入图片描述
注意：此方法属于 “侦听器”，在网络连接 / 断开的一瞬间，才会触发。

总结：navigator.onLine和online、offline事件却不是万能的，在 PC 端时只能判断无线和网线是否连接，而不能判断是否有网络、是否可以上网。

更为安全的做法：

<script type="text/javascript">
    var el = document.body;  
    if (el.addEventListener) {  
       window.addEventListener("online", function () {  
         alert("网络连接恢复");}, true);  
       window.addEventListener("offline", function () {  
         alert("网络连接中断");}, true);  
    }  
    else if (el.attachEvent) {  
       window.attachEvent("ononline", function () {  
         alert("网络连接恢复");});  
       window.attachEvent("onoffline", function () {  
         alert("网络连接中断");});  
    }  
    else {  
       window.ononline = function () {  
         alert("网络连接恢复");};  
       window.onoffline = function () {  
         alert("网络连接中断");};  
    }  
</script>

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

attachEvent ―― 兼容：IE7、IE8；不兼容 firefox、chrome、IE9、IE10、IE11、safari、opera
addEventListener ―― 兼容：firefox、chrome、IE、safari、opera；不兼容 IE7、IE8

推荐学习：《javascript高级教程》

三、可以发起 ajax 请求，根据请求结果判断网络的通断

<script type="text/javascript">
    $.ajax({
      url: 'https://sug.so.360.cn/suggest',
      dataType:'jsonp',
      success: function(result){
        console.log('网络正常')
      }, 
      error: function(result){
        console.log('网络异常')
      }
    });
</script>