网络连接检测后自动跳转：离线恢复后无法自动跳转的技术咨询

嘿，这个场景我太熟悉了！你的现有代码只在30秒时做单次网络检测，之后不管网络状态怎么变化，都不会再触发跳转逻辑——这就是为啥恢复网络后必须刷新才能跳转的原因。咱们可以通过监听浏览器的网络状态变化事件，结合原有定时器逻辑来解决这个问题。

问题分析 #

原来的setTimeout只会执行一次Redirect函数：

• 如果30秒时网络正常，直接跳转；
• 如果30秒时离线，函数执行后就结束了，后续网络恢复也不会再调用它。

改进方案 #

我们需要添加网络状态变化的监听，当浏览器检测到网络从离线恢复为在线时，自动触发跳转逻辑。同时保留初始的30秒延迟，确保正常场景下的按时跳转。

修改后的完整代码 #

function Redirect() {
  // 仅当网络在线时执行跳转
  if (Offline.state === 'up') {
    window.location = "../Offline/FPDTest.aspx";
  }
}

// 保留初始的30秒延迟跳转逻辑
setTimeout(Redirect, 30000);

// 监听网络恢复事件，一旦在线就触发跳转
window.addEventListener('online', function() {
  // 可选：加个小延迟确保网络稳定，避免刚恢复就跳转失败
  setTimeout(Redirect, 500);
});

代码说明 #

• 初始定时器：和原来逻辑一致，30秒后首次检查网络状态并尝试跳转；
• online事件监听：浏览器内置的online事件会在网络从离线恢复时触发，此时我们调用Redirect函数，就能自动完成跳转；
• 可选延迟：添加500毫秒的小延迟是为了避免网络刚恢复但连接还不稳定的情况，你可以根据实际需求调整或者直接去掉这个内层setTimeout。

测试建议 #

你可以用浏览器开发者工具的Network面板，勾选「Offline」选项模拟离线状态，取消勾选模拟网络恢复，就能验证这个逻辑是否生效啦。

内容的提问来源于stack exchange，提问作者Muhammad Faiz