在线和离线事件

部分浏览器根据 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 的响应

参考

文档标签和贡献者

 此页面的贡献者: sunnylost
 最后编辑者: sunnylost,