如何用JavaScript检测离线/在线状态


本文摘自PHP中文网,作者coldplay.xixi,侵删。

这两年离线浏览技术越来越流行,最常见的就是HTML5移动应用里,有很多普通的Web app也使用了这些技术。但是,新技术的出现有时会给我们WEB开发人员带领额外的苦恼,比如,如何判断用户现在是在线还是离线?幸好,有矛就有盾,JavaScript里的navigator对象帮我们解决这个问题。

相关学习推荐:javascript视频教程

navigator.onLine

navigator.onLine属性能给我们提供一个布尔值,用来判断用户是否连接了互联网。你可以这样访问它:

1

2

3

if(navigator.onLine) { // true|false

    // ...

}

没有比这更简单的了!

事件

我们除了能检测这个离线/在线属性值外,还可以绑定offlineonline事件:

1

2

3

4

5

6

7

8

function updateIndicator() {

    // 这时可以根据offline/online按钮的颜色

}

 

// 根据网络连接情况更新在线状态

window.addEventListener('online',  updateIndicator);

window.addEventListener('offline', updateIndicator);

updateIndicator();

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

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

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

以上就是如何用JavaScript检测离线/在线状态的详细内容,更多文章请关注木庄网络博客

相关阅读 >>

javascript怎么取set的值

深入了解js中的原始类型(primitive type)

javascript如何求最大值

浅谈javascript中工厂函数和构造函数

javascript怎么进行全局错误处理

javascript怎么让div隐藏

如何在js中改变dom元素的文本内容

javascript dom对象怎么转字符串

javascript中substr()和substring()之间的区别是什么?

javascript的调用函数方法有哪些

更多相关阅读请进入《javascript》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...