美文网首页
用JavaScript检测离线/在线状态

用JavaScript检测离线/在线状态

作者: 前端的爬行之旅 | 来源:发表于2019-08-21 15:56 被阅读0次

前言
要是没有这个Api的话,单纯前端想检测这个设备是否断网是不可能的,很多是通过跟客户端通讯后告知是否离线状态。
那今天就来看看这个api的情况。

正文从这开始~

这两年离线浏览技术越来越流行,最常见的就是HTML5移动应用里,有很多普通的Web app也使用了这些技术。但是,新技术的出现有时会给我们WEB开发人员带领额外的苦恼,比如,如何判断用户现在是在线还是离线?幸好,有矛就有盾,JavaScript里的navigator对象帮我们解决这个问题。
navigator.onLine
navigator.onLine属性能给我们提供一个布尔值,用来判断用户是否连接了互联网。你可以这样访问它:

image 没有比这更简单的了!
事件
我们除了能检测这个离线/在线属性值外,还可以绑定offline 和 online事件: image

当然,老式的技术里也提供了相应的方法,在body标记上使用ononline和 onoffline 方法。

我可以想象到很多地方都需要使用这些事件和属性。比如一种情况,当用户正在工作时,断网了,如果我们的WEB应用可以检测出这种状态,可以将用户的写作保持到本地的Web Storage里,等网络恢复后,再提交到服务器上,这样,断网将不会给用户的写作带来影响。这只是一个简单的例子,相信你能想出更多。

需要提醒的是,这个API并不是那么可靠。最古老的定时刷新的技术可以当做一种备案。

ps:看到这个,是不是觉得非常的蛋疼,但是既然有出现了,那还是还有希望的。希望在不久的将来这个可以来玩起来。

关于文本
转载链接: http://www.webhek.com/post/detecting-online-status-with-javascript.html

相关文章

网友评论

      本文标题:用JavaScript检测离线/在线状态

      本文链接:https://www.haomeiwen.com/subject/nytawftx.html