web前端实现断网情况下,自动重新连接

web前端实现断网情况下,自动重新连接

用 JavaScript 检测浏览器在线/离线状态(JavaScript API — navigator.onLine)

如今HTML5 移动应用或 Web app 中越来越普遍的使用了离线浏览技术,所以用 JavaScript 检测浏览器在线/离线状态非常常见。 无论浏览器是否在线,navigator.onLine 属性都会提供一个布尔值。 如果浏览器在线,则设置为 true ,否则设置为 false 。

if(navigator.onLine) {
          
    // true|false
    // ...
}

online 和 offline 事件:

当浏览器脱机或上线时,浏览器还支持 online 和 offline 事件。

// 断网后重新连接
  window.addEventListener(online, () => {
          
   
    location.reload()
  })

注意事项:

    IE8中需要给document.body绑定事件而不是window; 在线离线的变化指的是物理上的网络链接变化,如果是在控制台将网络限制为 offline 则不会触发相应的事件。
经验分享 程序员 微信小程序 职场和发展