关于javascript:JS中监听网络状况的常用方法

48次阅读

共计 584 个字符,预计需要花费 2 分钟才能阅读完成。

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 的兼容性比拟低,在理论开发中审慎应用。

正文完
 0