diff options
Diffstat (limited to 'files/zh-cn/orphaned/web/api/navigatoronline')
3 files changed, 335 insertions, 0 deletions
diff --git a/files/zh-cn/orphaned/web/api/navigatoronline/index.html b/files/zh-cn/orphaned/web/api/navigatoronline/index.html new file mode 100644 index 0000000000..b2a7f14cc9 --- /dev/null +++ b/files/zh-cn/orphaned/web/api/navigatoronline/index.html @@ -0,0 +1,127 @@ +--- +title: NavigatorOnLine +slug: orphaned/Web/API/NavigatorOnLine +tags: + - API + - HTML-DOM + - TopicStub +translation_of: Web/API/NavigatorOnLine +original_slug: 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/orphaned/web/api/navigatoronline/online/index.html b/files/zh-cn/orphaned/web/api/navigatoronline/online/index.html new file mode 100644 index 0000000000..ffc33f9d7a --- /dev/null +++ b/files/zh-cn/orphaned/web/api/navigatoronline/online/index.html @@ -0,0 +1,88 @@ +--- +title: NavigatorOnLine.onLine +slug: orphaned/Web/API/NavigatorOnLine/onLine +tags: + - API + - DOM Reference +translation_of: Web/API/NavigatorOnLine/onLine +original_slug: 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/orphaned/web/api/navigatoronline/online_and_offline_events/index.html b/files/zh-cn/orphaned/web/api/navigatoronline/online_and_offline_events/index.html new file mode 100644 index 0000000000..8b873aad6c --- /dev/null +++ b/files/zh-cn/orphaned/web/api/navigatoronline/online_and_offline_events/index.html @@ -0,0 +1,120 @@ +--- +title: 在线和离线事件 +slug: orphaned/Web/API/NavigatorOnLine/Online_and_offline_events +tags: + - AJAX + - DOM + - HTML5 + - Web 开发 + - 离线 web 应用 +translation_of: Web/API/NavigatorOnLine/Online_and_offline_events +original_slug: 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 中为 文件 -> 离线工作) 切换到「离线模式」时，这个值就会被更新。</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><body></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;"><body> 标签上指定</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"><div id="status"></div> +<div id="log"></div> +<p>This is a test</p> +</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> |