js(包括vue)如何检测网络状况如离线......

通用方法，Html5在window.navigator对象上添加了一个属性onLine 返回布尔值 true表示在线.同时新增了两个事件：window.addEventListener('online',function(){// 网络由异常到正常时触发});window.addEventListener('offline', function()...

肥龙也

9778人浏览 · 2019-04-12 10:25:42

肥龙也 · 2019-04-12 10:25:42 发布

通用方法，Html5在window.navigator对象上添加了一个属性onLine 返回布尔值 true表示在线.同时新增了两个事件：

    window.addEventListener('online',  function(){
     // 网络由异常到正常时触发
    });
    window.addEventListener('offline', function(){
     // 网络由正常常到异常时触发
    });
复制代码

在vue中实现思路如下：

data中初始化在线状态。

data(){
    return{
        onLine: navigator.onLine,
    }
}
复制代码

mounted中监听事件

mounted(){
    window.addEventListener('online',  this.updateOnlineStatus);
    window.addEventListener('offline', this.updateOnlineStatus);
}
复制代码

方法中改变onLine值

methods:{
    updateOnlineStatus(e) {
    	const { type } = e;
        this.onLine = type === 'online';
      },
}
复制代码

4.最后最好在销毁时解除事件监听

beforeDestroy(){
 window.removeEventListener('online',  this.updateOnlineStatus);
 window.removeEventListener('offline', this.updateOnlineStatus);
},

作者：黎明破晓的街道
链接：https://juejin.im/post/5bfccaa5e51d452c6061f599

另外也可以采用H5的API拓展plusready来实现

http://www.html5plus.org/doc/zh_cn/events.html

<!DOCTYPE html>
<html>
	<head>
	<meta charset="utf-8">
	<title>Events Example</title>
	<script type="text/javascript" >
// 扩展API加载完毕后调用onPlusReady回调函数 
document.addEventListener("plusready", onPlusReady, false);
function onPlusReady(){
	document.addEventListener("netchange", onNetChange, false);  
}
function onNetChange(){
	var nt = plus.networkinfo.getCurrentType();
	switch (nt){
		case plus.networkinfo.CONNECTION_ETHERNET:
		case plus.networkinfo.CONNECTION_WIFI:
		alert("Switch to Wifi networks!"); 
		break; 
		case plus.networkinfo.CONNECTION_CELL2G:
		case plus.networkinfo.CONNECTION_CELL3G:
		case plus.networkinfo.CONNECTION_CELL4G:
		alert("Switch to Cellular networks!");  
		break; 
		default:
		alert("Not networks!"); 
		break;
	}
}
	</script>
	</head>
	<body >
	</body>
</html>

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^