JS中监听网络状况的常用方法

时间:2020-9-10 作者:admin

1. navigator.onLine

返回的是布尔值true表示在线,false表示离线。

onLine属性只能简单判断网络的断开和连接状态,而不能监听网络状态的变化,例如从4g到3g。

function updateOnline() {
    console.log(navigator.onLine ? 'online' : 'offline');
}

window.addEventListener('online', updateOnline);
window.addEventListener('offline', updateOnline);

兼容性

JS中监听网络状况的常用方法

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);
});

兼容性

JS中监听网络状况的常用方法

JS中监听网络状况的常用方法

可以看到,connection的兼容性比较低,在实际开发中谨慎使用。

声明:本文内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎进行举报,并提供相关证据,工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。