如今HTML5 移动应用或 Web app 中越来越普遍的使用了离线浏览技术,所以用 JavaScript 检测浏览器在线/离线状态非常常见。无论浏览器是否在线,navigator.onLine
属性都会提供一个布尔值。 如果浏览器在线,则设置为 true
,否则设置为 false
。
if(navigator.onLine) { // true|false // ... }
online 和 offline 事件
当浏览器脱机或上线时,浏览器还支持 online
和 offline
事件。
window.addEventListener('online', function(e){console.log('online')}); window.addEventListener('offline', function(e){console.log('offline');});
你可以使用几种熟悉的方式来注册事件:
- 在
window
,document
,或document.body
上使用addEventListener
- 将
document
或document.body
的ononline
或onoffline
属性设置为一个 JavaScript Function 对象。(注意:由于兼容性原因,不能使用window.ononline
或window.onoffline
。) - 在 HTML 标记中的
body
标签上指定 ononline=”…” 或 onoffline=”…” 特性。
在线demo: https://www.7psus5.com/demo/navigator.onLine/ 你可以拔掉网线再插上网线试试
注意事项
- IE8中需要给document.body绑定事件而不是window
- 在线离线的变化指的是物理上的网络链接变化,如果是在控制台将网络限制为 offline 则不会触发相应的事件。
- 兼容性
- IE:8+
- Chrome:14+
- Firefox:3.5+(4-40存在bug,只有在 offline 模式下才会显示正确,否则onLine的值一直是true)
- Safari:5+
- 代替方案:
最后推荐一个 React 检查用户是否在线或离线的库。
最新评论
写的挺好的
有没有兴趣翻译 impatient js? https://exploringjs.com/impatient-js/index.html
Flexbox playground is so great!
感谢总结。
awesome!
这个好像很早就看到类似的文章了
比其他的教程好太多了
柯理化讲的好模糊…没懂