用户连接到互联网的时候，浏览器会触发一个 online 事件 … 断开网络的时候，会触发一个 offline 事件 … 在线的时候，navigator.onLine 可以返回一个真的值 …

利用这些东西，我们可以让应用针对在线还有离线这些情况去做出不同的反应 ….

这个视频我们去实现一个简单的功能 … 就是在用户在联网状态下 … 在应用上显示一个 在线 的小标签 … 断网以后 … 这个在小标签会变成 离线 …

先看一下需要的 HTML 代码 …

在这里有一个 <span> 标签 .. 上面定义了 online-status 这个 ID， 另外还有两个 css 类 … badge ，还有 success ….. badge 这个类的样式来自 bootstrap 的 badge 组件 … 默认它的背景颜色是一种灰色 ...

success 这个类的样式就是给小标签添加一个绿色的背景 ..

标签里的文字默认是 在线 … 在离线的状态下，我们可以去掉 success 这个类 … 然后再把文字改成 离线 …

script.js

打开 script.js 去添加需要的代码 …

先添加一个 online 还有 offline 事件的监听器 … 这两件事件属于 window 这个对象 …

window.addEventListener('online', onlineStatus);
window.addEventListener('offline', onlineStatus);

这样用户联网或者断网以后，都会去执行这个 onlineStatus … 在上面，我们再去定义这个函数 …

先获取到用来显示在线或者离线标签的元素 …

然后用一个 if 语句 … 去判断一下用户的联网状态 …. navigator.onLine 在处于联网状态的时候，会返回一个真的值 …

如果用户是联网状态 … 设置状态标签里的文字为 在线 … 再设置它上面使用的 css 类 …

下面再用一个else … 去定义一下，如果当前的状态是离线的状态要做的事 …

设置标签里的文字为 离线 …. 用到的 css 类是 badge … 这里我们去掉了 success 类 … 所以在离线的时候，标签的背景会是一种灰色 …

同样在页面加载以后，需要去调用这个 onlineStatus 函数。

// 在线状态
function onlineStatus() {
var status = document.getElementById("online-status");
if (navigator.onLine){
status.innerHTML = "在线";
status.className = "badge success";
}else{
status.innerHTML = "离线";
status.className = "badge";
}
}

测试

保存 … 打开浏览器去测试一下 … 刷新 …

当前的状态是联网的 … 所以这个小标签上会显示，在线 … 并且背景是绿色的 …

下面我们再断开网络试一下 ….

断网以后，标签文字会变成 离线 … 背景会变成 灰色 …

如果再次联网的话 … 标签又会变成绿色的在线 ...