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 属性才能检测到网络状态的变化。