您的位置:首页 » 分类: JavaScript » 文章: 用 JavaScript 检测浏览器在线/离线状态(JavaScript API — navigator.onLine)

用 JavaScript 检测浏览器在线/离线状态(JavaScript API — navigator.onLine)

小编推荐:掘金是一个高质量的技术社区,从 ECMAScript 6 到 Vue.js,性能优化到开源类库,让你不错过前端开发的每一个技术干货。各大应用市场搜索「掘金」即可下载APP,技术干货尽在掌握..

如今HTML5 移动应用或 Web app 中越来越普遍的使用了离线浏览技术,所以用 JavaScript 检测浏览器在线/离线状态非常常见。无论浏览器是否在线,navigator.onLine 属性都会提供一个布尔值。 如果浏览器在线,则设置为 true ,否则设置为 false

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

online 和 offline 事件

当浏览器脱机或上线时,浏览器还支持 onlineoffline 事件。

window.addEventListener('online', function(e){console.log('online')});
window.addEventListener('offline', function(e){console.log('offline');});

你可以使用几种熟悉的方式来注册事件:

  • windowdocument,或 document.body 上使用 addEventListener
  • documentdocument.bodyononlineonoffline 属性设置为一个 JavaScript Function 对象。(注意:由于兼容性原因,不能使用 window.ononlinewindow.onoffline。)
  • 在 HTML 标记中的 body 标签上指定 ononline=”…” 或 onoffline=”…” 特性。

在线demo: http://www.css88.com/demo/navigator.onLine/ 你可以拔掉网线再插上网线试试

注意事项

  • IE8中需要给document.body绑定事件而不是window
  • 在线离线的变化指的是物理上的网络链接变化,如果是在控制台将网络限制为 offline 则不会触发相应的事件。
  • 兼容性
    • IE:8+
    • Chrome:14+
    • Firefox:3.5+(4-40存在bug,只有在 offline 模式下才会显示正确,否则onLine的值一直是true)
    • Safari:5+
  • 代替方案:https://stackoverflow.com/questions/14283124/navigator-online-not-always-working

最后推荐一个 React 检查用户是否在线或离线的库。https://github.com/chrisbolin/react-detect-offline

正文完。下面还有一个推广让最好的人才遇见更好的机会!

互联网行业的年轻人,他们面对着怎样的职业瓶颈、困惑与未来选择?过去,这鲜有人关心。资深的职场人,也多半优先选择熟人去推荐机会。

100offer致力于改变现状,帮互联网行业最好的人才发现更好的机会。使用 100offer.com 或 100offer App ,可以一周内获得中国、美国等数千家优质企业的工作机会。

马上去遇见更好的机会
推广结束

关注WEB前端开发官方公众号

关注国内外最新最好的前端开发技术干货,获取最新前端开发资讯,致力于打造高质量的前端技术分享公众号

发表评论

电子邮件地址不会被公开。 必填项已用*标注