js(包括vue)如何检测网络状况如离线......
通用方法，Html5在window.navigator对象上添加了一个属性onLine 返回布尔值 true表示在线.同时新增了两个事件：window.addEventListener('online',function(){// 网络由异常到正常时触发});window.addEventListener('offline', function()...
·
通用方法，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>
前往低代码交流专区
更多推荐
6
0- 0
已为社区贡献4条内容
所有评论(0)