initial commit

3 files changed, 334 insertions, 0 deletions

diff --git a/files/zh-cn/web/api/navigatoronline/index.html b/files/zh-cn/web/api/navigatoronline/index.html
new file mode 100644
index 0000000000..4e0f4431f8
--- /dev/null
+++ b/files/zh-cn/web/api/navigatoronline/index.html
@@ -0,0 +1,126 @@
+---
+title: NavigatorOnLine
+slug: Web/API/NavigatorOnLine
+tags:
+  - API
+  - HTML-DOM
+  - TopicStub
+translation_of: Web/API/NavigatorOnLine
+---
+<p>{{APIRef("HTML DOM")}}</p>
+
+<p><code><strong>NavigatorOnLine</strong></code>接口包含了与浏览器网络连接状态相关的方法和属性。</p>
+
+<p>不存在<code>NavigatorOnLine类型的对象，</code>但是存在其他的接口，比如 {{domxref("Navigator")}} 或者 {{domxref("WorkerNavigator")}}，可以实现它。</p>
+
+<h2 id="属性">属性</h2>
+
+<p><em><code>NavigatorOnLine</code></em><em> 接口并不能继承任何属性。</em></p>
+
+<dl>
+ <dt>{{domxref("NavigatorOnLine.onLine")}} {{readonlyInline}}</dt>
+ <dd>返回一个 {{domxref("Boolean")}} 值指示浏览器是否为在线状态。</dd>
+</dl>
+
+<h2 id="方法">方法</h2>
+
+<p><em><code>NavigatorOnLine</code></em><em> 接口既不能实现，也不能继承任何方法。</em></p>
+
+<h2 id="规范">规范</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">规范</th>
+   <th scope="col">状态</th>
+   <th scope="col">注解</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', '#navigatoronline', 'NavigatorOnLine')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>对比最近的简况没有变化, {{SpecName('HTML5 W3C')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', '#navigatoronline', 'NavigatorOnLine')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>{{SpecName('HTML WHATWG')}} 原始标准的简况.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="浏览器兼容性">浏览器兼容性</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>特征</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>基本支持</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>在{{domxref("WorkerNavigator")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop(29)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>特征</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>基本支持</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td> {{domxref("WorkerNavigator")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile(29)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="浏览相关">浏览相关</h2>
+
+<ul>
+ <li>可以实现它的 {{domxref("Navigator")}} 接口。</li>
+</ul>
diff --git a/files/zh-cn/web/api/navigatoronline/online/index.html b/files/zh-cn/web/api/navigatoronline/online/index.html
new file mode 100644
index 0000000000..d89f0baa57
--- /dev/null
+++ b/files/zh-cn/web/api/navigatoronline/online/index.html
@@ -0,0 +1,87 @@
+---
+title: NavigatorOnLine.onLine
+slug: Web/API/NavigatorOnLine/onLine
+tags:
+  - API
+  - DOM Reference
+translation_of: Web/API/NavigatorOnLine/onLine
+---
+<p>{{ApiRef("HTML DOM")}}</p>
+
+<p>返回浏览器的联网状态。正常联网（在线）返回 <code>true</code>，不正常联网（离线）返回 <code>false</code>。一旦浏览器的联网状态发生改变，该属性值也会随之变化。当用户点击链接或者脚本进行网络请求时，如果发现浏览器连接不上互联网，则该属性会被赋值为<code>false</code>。</p>
+
+<p>各浏览器对该属性的实现有些不同。</p>
+
+<p>在 Chrome 和 Safari 中，如果浏览器连接不上局域网（LAN）或者路由器，就是离线状态；否则就是在线状态。所以当该属性值为 <code>false </code>的时候，你可以说浏览器不能正常联网，但如果该属性值为true的时候，并不意味着浏览器一定能连接上互联网。还有其他一些可能引起误判的原因，比如你的电脑安装了虚拟化软件，可能会有一个虚拟网卡，这时它总是会显示正常联网。因此，如果你想得到浏览器确切的联网状态，应该使用其他额外的检查手段。</p>
+
+<p>在 Firefox 和 Internet Explorer 中，如果浏览器处于"脱机工作"状态，则返回 <code>false</code>。在 Firefox 41之前，所有其他条件都返回 <code>true</code> 值；在 Windows 上的 Nightly 68上测试实际行为表明，它仅查找类似 Chrome 和 Safari 的 LAN 连接，从而产生误报。</p>
+
+<p>你可以在 <a href="/zh-CN/docs/Web/API/document.ononline"><code>window.ononline</code></a> 和 <a href="/zh-CN/docs/Web/API/document.onoffline"><code>window.onoffline</code></a>上监听事件，来获取浏览器联网状态的改变情况。</p>
+
+<h2 id="语法">语法</h2>
+
+<pre><em>online</em> = <em>window</em>.navigator.onLine;
+</pre>
+
+<h3 id="取值">取值</h3>
+
+<p><code>online</code> 是个布尔值 <code>true</code> 或 <code>false。</code></p>
+
+<h2 id="示例">示例</h2>
+
+<p>查看 <a class="external" href="http://html5-demos.appspot.com/static/navigator.onLine.html">在线演示</a>.</p>
+
+<p>想要查看你是否连接上了互联网，查询 <code>window.navigator.onLine</code> 的值，如下方示例：</p>
+
+<pre class="brush: js">if (navigator.onLine) {
+  alert('online')
+} else {
+  alert('offline');
+}
+</pre>
+
+<p>如果浏览器不支持 <code>navigator.onLine</code>，则上面的示例将始终显示为 <code>false</code> / <code>undefined</code>。</p>
+
+<p>要查看网络状态的变化，请使用 <code><a href="/zh-CN/docs/DOM/element.addEventListener">addEventListener</a></code>  侦听 <code>window.online</code> 和 <code>window.offline</code> 事件，如以下示例所示：</p>
+
+<pre class="brush: js">window.addEventListener("offline", function(e) {alert("offline");})
+
+window.addEventListener("online", function(e) {alert("online");})
+</pre>
+
+<h2 id="规范">规范</h2>
+
+<table>
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("HTML WHATWG", "browsers.html#dom-navigator-online", "navigator.onLine")}}</td>
+   <td>{{Spec2("HTML WHATWG")}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="浏览器兼容性">浏览器兼容性</h2>
+
+<p>The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("api.NavigatorOnLine.onLine")}}</p>
+
+<h2 id="备注">备注</h2>
+
+<p>See <a href="https://wiki.developer.mozilla.org/en-US/docs/Online_and_offline_events">Online/Offline Events‎</a> for a more detailed description of this property as well as new offline-related features introduced in Firefox 3.</p>
+
+<h2 id="查看更多">查看更多</h2>
+
+<ul>
+ <li><a href="http://www.html5rocks.com/en/mobile/workingoffthegrid.html">HTML5 Rocks: Working Off the Grid With HTML5 Offline</a></li>
+ <li><a href="http://www.html5rocks.com/en/tutorials/offline/whats-offline/">HTML5 Rocks: "Offline": What does it mean and why should I care?</a></li>
+ <li><a href="http://hacks.mozilla.org/2010/01/offline-web-applications/">Mozilla Blog: Offline Web Applications</a></li>
+</ul>
diff --git a/files/zh-cn/web/api/navigatoronline/online_and_offline_events/index.html b/files/zh-cn/web/api/navigatoronline/online_and_offline_events/index.html
new file mode 100644
index 0000000000..bdf456094b
--- /dev/null
+++ b/files/zh-cn/web/api/navigatoronline/online_and_offline_events/index.html
@@ -0,0 +1,121 @@
+---
+title: 在线和离线事件
+slug: Web/API/NavigatorOnLine/Online_and_offline_events
+tags:
+  - AJAX
+  - DOM
+  - HTML5
+  - Web 开发
+  - 离线 web 应用
+translation_of: Web/API/NavigatorOnLine/Online_and_offline_events
+---
+<p>部分浏览器根据 <a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/">WHATWG Web Applications 1.0 规范</a> 实现了<a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/#offline">Online/Offline 事件</a>。</p>
+
+<h3 id="Overview" name="Overview">概述</h3>
+
+<p>为了构建一个支持离线的 web 应用，你需要知道你的应用何时真正处于离线状态。同时，你还需要知道应用何时重新回到了「在线」状态。实际上，我们可以把需求分解成如下内容：</p>
+
+<ol>
+ <li>你需要知道用户何时回到在线状态，这样你就可以与服务器重新同步。</li>
+ <li>你需要知道用户何时处于离线状态，这样你就可以将对服务器的请求放入队列中以便稍后使用。</li>
+</ol>
+
+<p>这便是在线/离线事件所要处理的过程。</p>
+
+<p>你的 web 应用可能需要使得某个特定的文档在离线资源缓存中得到维护。 你可以在 <a href="/en/Offline_resources_in_Firefox" title="en/Offline_resources_in_Firefox">Firefox 中的离线资源</a> 这篇文章中了解到更多内容。</p>
+
+<h3 id="API" name="API">API</h3>
+
+<h4 id="navigator.onLine" name="navigator.onLine"><code>navigator.onLine</code></h4>
+
+<p><code><a href="/en/DOM/window.navigator.onLine" title="en/DOM/window.navigator.onLine">navigator.onLine</a></code> 是一个值为 <code>true</code>/<code>false</code>  (<code>true</code> 表示在线， <code>false</code> 表示离线) 的属性。当用户通过选择对应的菜单项 (Firefox 中为 文件 -&gt; 离线工作) 切换到「离线模式」时，这个值就会被更新。</p>
+
+<p>此外，当浏览器长时间无法连接到网络时，该值也会被更新。根据如下规范：</p>
+
+<blockquote cite="http://www.whatwg.org/specs/web-apps/current-work/#offline"><code>由于用户点击一个链接或是脚本请求一个远程页面(或者类似的操作失败了)从而导致户代理无法访问网络时， navigator.onLine</code> 属性返回 false ...</blockquote>
+
+<p>在 Firefox 2 中，当在浏览器的离线模式中来回切换时会更新该属性。  Windows, Linux, 和 OS X 上的 <a href="https://developer.mozilla.org/en-US/Firefox/Releases/41#Miscellaneous">Firefox 41</a> 会在操作系统报告网络连接变化时更新该属性。</p>
+
+<p>该属性存在于旧版本的 Firefox 与 Internet Explorer (规范就是以这些旧有实现为基础)，因此你现在就可以使用该属性。Firefox 2实现了网络状态自动检测。</p>
+
+<h4 id=".22online.22_and_.22offline.22_events" name=".22online.22_and_.22offline.22_events"><code>「online」与「</code><code>offline」</code> 事件</h4>
+
+<p><a href="/en/Firefox_3_for_developers" title="en/Firefox_3_for_developers">Firefox 3</a> 引入了两个新事件：「<code>online」与「</code><code>offline」。当浏览器从在线与离线状态中切换时，这两个事件会在页面的</code> <code>&lt;body&gt;</code> 上触发。此外，该事件会从 <code>document.body 冒泡到</code> <code>document 上，最后到达</code> <code>window。两个事件都无法被取消</code>(你无法阻止用户进入在线或离线状态)。</p>
+
+<p>你可以使用几种熟悉的方式来注册事件：</p>
+
+<ul>
+ <li>在 <code>window，</code><code>document，或<font face="Lucida Grande, Lucida Sans Unicode, DejaVu Sans, Lucida, Arial, Helvetica, sans-serif"><span style="line-height: 21px;"> </span></font></code><code>document.body 上使用 </code><code style="font-size: 14px;"><a href="/en/DOM/element.addEventListener" title="en/DOM/element.addEventListener">addEventListener</a></code></li>
+ <li>将 <code style="font-size: 14px;">document</code> 或 <code style="font-size: 14px;">document.body 的</code> <code>.ononline</code> 或 <code>.onoffline</code> 属性设置为一个 JavaScript <code>Function</code> 对象。(<strong>注意：</strong>由于兼容性原因，不能使用 <code>window.ononline</code> 或 <code>window.onoffline</code>。)</li>
+ <li>在 HTML 标记中的 <code style="font-size: 14px;">&lt;body&gt; 标签上指定</code> <code>ononline="..."</code> 或 <code>onoffline="..."</code> 特性。</li>
+</ul>
+
+<h3 id="Example" name="Example">示例</h3>
+
+<p>运行这个<a class="link-https" href="https://bugzilla.mozilla.org/attachment.cgi?id=220609">简单的例子</a>来验证事件。</p>
+
+<p>这是 JavaScript 部分的代码：</p>
+
+<pre class="brush: js">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);
+});</pre>
+
+<p>再加上一点儿 CSS</p>
+
+<pre class="brush: 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;
+}
+</pre>
+
+<p>对应的 HTML<span class="comment">XXX When mochitests for this are created, point to those instead and update this example -nickolay</span></p>
+
+<pre class="brush: html">&lt;div id="status"&gt;&lt;/div&gt;
+&lt;div id="log"&gt;&lt;/div&gt;
+&lt;p&gt;This is a test&lt;/p&gt;
+</pre>
+
+<h3 id="References" name="References">注意</h3>
+
+<p>如果浏览器没有实现该 API，你可以使用其他方式来检测是否离线，包括 <a class="external" href="http://www.html5rocks.com/en/mobile/workingoffthegrid.html#toc-appcache">AppCache 错误事件</a> 和 <a class="external" href="http://www.html5rocks.com/en/mobile/workingoffthegrid.html#toc-xml-http-request">XMLHttpRequest 的响应</a>。</p>
+
+<h3 id="References" name="References">参考</h3>
+
+<ul>
+ <li><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/#offline">'Online/Offline events' section from the WHATWG Web Applications 1.0 Specification</a></li>
+ <li><a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=336359">The bug tracking online/offline events implementation in Firefox</a> and a <a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=336682">follow-up</a></li>
+ <li><a class="link-https" href="https://bugzilla.mozilla.org/attachment.cgi?id=220609">A simple test case</a></li>
+ <li><a class="external" href="http://ejohn.org/blog/offline-events/">An explanation of Online/Offline events</a></li>
+ <li><a class="external" href="http://hacks.mozilla.org/2010/01/offline-web-applications/" title="http://hacks.mozilla.org/2010/01/offline-web-applications/">offline web applications</a> at hacks.mozilla.org - showcases an offline app demo and explains how it works.</li>
+</ul>
+
+<div>{{ HTML5ArticleTOC() }}</div>