blob: d89f0baa5774dc44a13171ccf3cc0cd5872250df (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
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>
|
