如今html5 移动应用或 web app 中越来越普遍的使用了离线浏览技术,所以用 JavaScript 检测浏览器在线/离线状态非常常见。无论浏览器是否在线,
属性都会提供一个布尔值。 如果浏览器在线,则设置为
- navigator.onLine
,否则设置为
- true
。
- false
- if (navigator.onLine) { // true|false
- // ...
- }
当浏览器脱机或上线时,浏览器还支持
和
- 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
属性设置为一个 JavaScript Function 对象。(注意:由于兼容性原因,不能使用
- onoffline
或
- window.ononline
。)
- window.onoffline
标签上指定 ononline=”…” 或 onoffline=”…” 特性。
- body
在线demo: http://www.CSS88.com/demo/navigator.onLine/ 你可以拔掉网线再插上网线试试
最后推荐一个 React 检查用户是否在线或离线的库。https://github.com/chrisbolin/react-detect-offline
来源: http://www.css88.com/archives/8236