在线和离线事件

部分浏览器根据 WHATWG Web Applications 1.0 规范 实现了Online/Offline 事件。

概述

为了构建一个支持离线的 web 应用，你需要知道你的应用何时真正处于离线状态。同时，你还需要知道应用何时重新回到了「在线」状态。实际上，我们可以把需求分解成如下内容：

  1. 你需要知道用户何时回到在线状态，这样你就可以与服务器重新同步。
  2. 你需要知道用户何时处于离线状态，这样你就可以将对服务器的请求放入队列中以便稍后使用。

这便是在线/离线事件所要处理的过程。

你的 web 应用可能需要使得某个特定的文档在离线资源缓存中得到维护。 你可以在 Firefox 中的离线资源 这篇文章中了解到更多内容。

API

navigator.onLine 是一个值为 true/false  (true 表示在线， false 表示离线) 的属性。当用户通过选择对应的菜单项 (Firefox 中为 文件 -> 离线工作) 切换到「离线模式」时，这个值就会被更新。

此外，当浏览器长时间无法连接到网络时，该值也会被更新。根据如下规范：

由于用户点击一个链接或是脚本请求一个远程页面(或者类似的操作失败了)从而导致户代理无法访问网络时， navigator.onLine 属性返回 false ...

在 Firefox 2 中，当在浏览器的离线模式中来回切换时会更新该属性。  Windows, Linux, 和 OS X 上的 Firefox 41 会在操作系统报告网络连接变化时更新该属性。

该属性存在于旧版本的 Firefox 与 Internet Explorer (规范就是以这些旧有实现为基础)，因此你现在就可以使用该属性。Firefox 2实现了网络状态自动检测。

「online」与「offline」 事件

Firefox 3 引入了两个新事件：「online」与「offline」。当浏览器从在线与离线状态中切换时，这两个事件会在页面的 <body> 上触发。此外，该事件会从 document.body 冒泡到 document 上，最后到达 window。两个事件都无法被取消(你无法阻止用户进入在线或离线状态)。

你可以使用几种熟悉的方式来注册事件：

  • 在 window，document，或 document.body 上使用 addEventListener
  • 将 document 或 document.body 的 .ononline 或 .onoffline 属性设置为一个 JavaScript Function 对象。(注意：由于兼容性原因，不能使用 window.ononline 或 window.onoffline。)
  • 在 HTML 标记中的 <body> 标签上指定 ononline="..." 或 onoffline="..." 特性。

示例

运行这个简单的例子来验证事件。

这是 JavaScript 部分的代码：

window.addEventListener('load', function() {
  var status = document.getElementById("status");
  var log = document.getElementById("log");
  function updateOnlineStatus(event) {
    var condition = navigator.onLine ? "online" : "offline";
    status.className = condition;
    status.innerHTML = condition.toUpperCase();
    log.insertAdjacentHTML("beforeend", "Event: " + event.type + "; Status: " + condition);
  }
  window.addEventListener('online',  updateOnlineStatus);
  window.addEventListener('offline', updateOnlineStatus);
});

再加上一点儿 CSS

#status {
  position: fixed;
  width: 100%;
  font: bold 1em sans-serif;
  color: #FFF;
  padding: 0.5em;
}
#log {
  padding: 2.5em 0.5em 0.5em;
  font: 1em sans-serif;
}
.online {
  background: green;
}
.offline {
  background: red;
}

对应的 HTMLXXX When mochitests for this are created, point to those instead and update this example -nickolay

<div id="status"></div>
<div id="log"></div>
<p>This is a test</p>

注意

如果浏览器没有实现该 API，你可以使用其他方式来检测是否离线，包括 AppCache 错误事件 和 XMLHttpRequest 的响应。

参考

文档标签和贡献者