方法一、H5的属性 online和offline
online,offline事件用来监测浏览器处于在线或离线状态。HTML5提出的离线存储,web应用程序可以在不连接互联网的情况下满足用户的部分需求,比如在线记事本。当没有连接互联网,也就是offline的时候,我们可以把用户的数据保存在本地,当用户连接到互联网的时候,也就是online,我们可以把数据发送到服务器。
(1),属性:
window.navigator.onLinenavigator.onLine 属性表示当前是否在线。如果为 true, 表示在线;如果为 false, 表示离线。当网络状态发生变化时,navigator.onLine 的值也随之变化。开发者可以通过读取它的值获取网络状态。
(function(){
// console.log('已经执行!');
if(!navigator.onLine) {
//alert('请检查网络是否连接!');
var URLerr = document.getElementsByTagName("body")[0];
URLerr.innerHTML = "网络已断开连接";
document.getElementsByTagName("body")[0].style.textAlign="center";
return false;
}
}())
(2)两个事件
当开发离线应用时,通过 navigator.onLine 获取网络状态通常是不够的。开发者还需要在网络状态发生变化时立刻得到通知,因此 HTML5 还提供了 online/offline 事件。当在线 / 离线状态切换时,online/offline 事件将触发在 body 元素上,并且沿着 document.body,document 和 window 的顺序冒泡。因此,开发者可以通过监听它们的 online/offline 事件来获悉网络状态。
window.addEventListener('online', function(){}); window.addEventListener('offline', function(){}); 参考文件地址: https://www.cnblogs.com/bigbearbb/p/4299003.html方法二、ping.js
安装ping.js npm imstall ping.js
在需要的组件引入 import Ping from 'ping.js'
具体使用看代码:
https://github.com/alfg/ping.js/tree/master