JS中监听网络状况的常用方法
1. navigator.onLine
返回的是布尔值。true表示在线,false表示离线。
onLine属性只能简单判断网络的断开和连接状态,而不能监听网络状态的变化,例如从4g到3g。
function updateOnline() {
console.log(navigator.onLine ? online : offline);
}
window.addEventListener(online, updateOnline);
window.addEventListener(offline, updateOnline);
兼容性
2. navigator.connection
能监听到具体的网络变化(例如从4g变化到了3g),但不能监听到是离线状态还是在线状态。
const connection = navigator.connection || navigator.mozConnection || navigator.webkitConnection;
connection.addEventListener(change, () => {
// connection.effectiveType返回的是具体的网络状态:4g/3g/2g
console.log(connection.effectiveType);
});
兼容性
可以看到,connection的兼容性比较低,在实际开发中谨慎使用。
