如何在JavaScript中检测Internet连接是否离线?
当前回答
正如olliej所说,使用导航器。在线浏览器属性比发送网络请求更可取,因此developer.mozilla.org/En/Online_and_offline_events甚至被旧版本的Firefox和IE支持。
最近,WHATWG已经指定了在线和离线事件的添加,以防您需要在导航器上进行反应。在线更改。
请注意Daniel Silveira发布的链接,他指出依赖这些信号/属性与服务器同步并不总是一个好主意。
其他回答
几乎所有主流浏览器现在都支持window.navigator. online属性,以及相应的在线和离线窗口事件。运行以下代码片段来测试它:
console.log('Initially ' + (window.navigator.onLine ? 'on' : 'off') + 'line'); window.addEventListener('online', () => console.log('Became online')); window.addEventListener('offline', () => console.log('Became offline')); document.getElementById('statusCheck').addEventListener('click', () => console.log('window.navigator.onLine is ' + window.navigator.onLine)); <button id="statusCheck">Click to check the <tt>window.navigator.onLine</tt> property</button><br /><br /> Check the console below for results:
尝试将您的系统或浏览器设置为离线/在线模式,并检查日志或window.navigator.onLine属性的值变化。
请注意Mozilla文档中的这段话:
In Chrome and Safari, if the browser is not able to connect to a local area network (LAN) or a router, it is offline; all other conditions return true. So while you can assume that the browser is offline when it returns a false value, you cannot assume that a true value necessarily means that the browser can access the internet. You could be getting false positives, such as in cases where the computer is running a virtualization software that has virtual ethernet adapters that are always "connected." Therefore, if you really want to determine the online status of the browser, you should develop additional means for checking. In Firefox and Internet Explorer, switching the browser to offline mode sends a false value. Until Firefox 41, all other conditions return a true value; since Firefox 41, on OS X and Windows, the value will follow the actual network connectivity.
(重点是我自己的)
这意味着如果window.navigator.onLine为false(或者您得到一个脱机事件),则保证您没有Internet连接。
然而,如果它是真的(或者你得到一个在线事件),它充其量只意味着系统连接到某个网络。这并不意味着你可以上网。要检查这一点,您仍然需要使用其他答案中描述的解决方案之一。
我最初打算把这篇文章作为格兰特·瓦格纳(Grant Wagner)的回答的更新,但这似乎太过编辑了,尤其是考虑到2014年的更新已经不是他的了。
HTML5应用程序缓存API指定导航器。onLine,目前在IE8测试版中可用,WebKit(例如。Safari)的夜间运行,并且已经在Firefox 3中得到支持
您可以通过发出失败的XHR请求来确定连接已丢失。
标准的方法是重试请求几次。如果没有通过,请提醒用户检查连接,然后优雅地失败。
旁注:将整个应用程序置于“脱机”状态可能会导致大量易出错的处理状态工作。无线连接可能来来去去,等等。因此,最好的办法可能是优雅地失败,保存数据,并提醒用户。允许他们最终解决连接问题(如果有的话),并在一定程度上原谅他们继续使用你的应用。
旁注:您可以检查像谷歌这样的可靠站点的连接性,但这可能并不完全有用,因为只是尝试发出自己的请求,因为虽然谷歌可能可用,但您自己的应用程序可能不可用,并且您仍然必须处理自己的连接问题。尝试向谷歌发送ping信息是确认网络连接本身已中断的好方法,因此如果该信息对您有用,那么可能值得费心。
Sidenote: Sending a Ping could be achieved in the same way that you would make any kind of two-way ajax request, but sending a ping to google, in this case, would pose some challenges. First, we'd have the same cross-domain issues that are typically encountered in making Ajax communications. One option is to set up a server-side proxy, wherein we actually ping google (or whatever site), and return the results of the ping to the app. This is a catch-22 because if the internet connection is actually the problem, we won't be able to get to the server, and if the connection problem is only on our own domain, we won't be able to tell the difference. Other cross-domain techniques could be tried, for example, embedding an iframe in your page which points to google.com, and then polling the iframe for success/failure (examine the contents, etc). Embedding an image may not really tell us anything, because we need a useful response from the communication mechanism in order to draw a good conclusion about what's going on. So again, determining the state of the internet connection as a whole may be more trouble than it's worth. You'll have to weight these options out for your specific app.
您可以尝试,如果网络连接,这将返回true
function isInternetConnected(){return navigator.onLine;}
下面是我拥有的一个辅助实用程序片段。这是带名称空间的javascript:
network: function() {
var state = navigator.onLine ? "online" : "offline";
return state;
}
你应该使用这个方法检测,否则发射一个'替代'的方式来做这件事。这将是我们所需要的全部。其他的方法是hack。
推荐文章
- AngularJS:工厂和服务?
- js:将一个组件包装成另一个组件
- 父ng-repeat从子ng-repeat的访问索引
- JSHint和jQuery: '$'没有定义
- 模仿JavaScript中的集合?
- 用JavaScript验证电话号码
- 如何在HTML5中改变视频的播放速度?
- 谷歌地图API v3:我可以setZoom后fitBounds?
- 用jQuery检查Internet连接是否存在?
- ES6/2015中的null安全属性访问(和条件赋值)
- 与push()相反;
- JS字符串“+”vs concat方法
- AngularJS使用ng-class切换类
- 访问Handlebars.js每次循环范围之外的变量
- 如何用JavaScript截屏一个div ?