js HTML5 的离线检测

本文会用到 EventUtil 事件处理程序，详情请戳：https://blog.csdn.net/mChales_Liu/article/details/106541683

 

一、离线状态

离线状态：弱网络及断开网络的状态统称为离线状态。

 

二、离线检测

1、navigator.onLine 属性

HTML5 为此定义了一个 navigator.onLine 属性，这个属性的值：为 true 表示设备在线，为 false 表示设备离线了。

if(navigator.onLine){
    // 正常工作
} else {
    // 执行离线时的任务
}

2、online 和 offline 事件

除了 navigator.onLine 属性之外，HTML5 还定义了两个事件：online 和 offline。当网络从在线变为离线时会自动触发 offline 事件，当网络从离线变为在线时会自动触发 online 事件。

<script src="./methods/EventUtil.js"></script>
<script>
    EventUtil.addHandler(window, "offline", function(){
        alert("我离线了。");
    });
    EventUtil.addHandler(window, "online", function(){
        alert("我上线了。");
    });
</script>

3、离线检测的完整思路？

• 为了确保检测应用是否离线，在页面加载后，最好先通过 navigator.onLine 属性取得初始状态值；
• 然后通过 online 和 offline 两个事件来确定网络链接状态是否发生变化；
• 当触发 online 或 offline 事件时，navigator.onLine 属性的值也会发生相应的变化；
• 最后要检测网络状态的变化——必须要手工轮询 navigator.onLine 属性，才能检测到网络状态的变化。