JavaScript 如何检测并响应互联网连接变化？

在 JavaScript 中检测互联网连接：综合指南

在当今的 Web 开发环境中，确保稳健可靠的用户体验通常取决于检测互联网连接是离线还是活动。幸运的是，JavaScript 提供了多种方法来实现这一关键功能。

介绍 window.navigator.onLine 属性

现在大多数主流浏览器都支持 window.navigator.onLine 属性，一个布尔值，指示互联网连接的当前状态。访问此属性可检查用户是否已连接到互联网。

console.log('Initially ' + (window.navigator.onLine ? 'on' : 'off') + 'line');

监听连接事件

浏览器还为在线和离线事件提供事件监听器，当连接状态发生变化时触发。通过监听这些事件，您可以实时响应变化。

window.addEventListener('online', () => console.log('Became online'));
window.addEventListener('offline', () => console.log('Became offline'));

通过单击验证连接状态

演示这些方法的实际应用，创建一个 HTML 按钮，单击该按钮时，检查并显示当前的 window.navigator.onLine value:

<button></button>

document.getElementById('statusCheck').addEventListener('click', () => console.log('window.navigator.onLine is ' + window.navigator.onLine));

其他注意事项

• 由于缓存和 websockets，window.navigator.onLine 属性可能并不总是准确反映实际连接状态。
• 使用服务器端 API （例如 fetch() API）并定期监控它们的响应可以补充客户端方法以提高可靠性。

以上是JavaScript 如何检测并响应互联网连接变化？的详细内容。更多信息请关注PHP中文网其他相关文章！