如何实现网页即使在服务器返回错误时也能正常自动刷新？

方案1：使用Service Worker（推荐，无页面嵌套） #

http-equiv="refresh" 仅在正常HTML页面成功加载后才会生效，服务器返回502错误时浏览器会渲染默认错误页，不会加载你写的页面刷新逻辑，因此原有机制失效。Service Worker是运行在浏览器后台的独立线程，只要用户曾经成功打开过一次你的页面，后续哪怕页面加载失败，Service Worker都能正常工作，控制页面刷新逻辑。

实现代码 #

1. 在正常业务页面的JS中加入Service Worker注册逻辑：

if ('serviceWorker' in navigator) {
  window.addEventListener('load', async () => {
    try {
      await navigator.serviceWorker.register('/sw.js');
    } catch (e) {
      console.log('Service Worker注册失败: ', e);
    }
  });
}

2. 在正常业务页面的JS中加入刷新消息监听：

navigator.serviceWorker?.addEventListener('message', (e) => {
  if (e.data.type === 'REFRESH') {
    window.location.reload();
  }
});

3. 在站点根目录新建sw.js文件，内容如下：

const REFRESH_INTERVAL = 30 * 1000; // 刷新间隔，单位毫秒，可自行修改
let timer = null;

// 安装后立即激活
self.addEventListener('install', (e) => {
  e.waitUntil(self.skipWaiting());
});

self.addEventListener('activate', (e) => {
  e.waitUntil(self.clients.claim());
  startRefreshTimer();
});

// 启动定时刷新任务
function startRefreshTimer() {
  if (timer) clearInterval(timer);
  timer = setInterval(async () => {
    const clients = await self.clients.matchAll({ type: 'window' });
    clients.forEach(client => {
      client.postMessage({ type: 'REFRESH' });
    });
  }, REFRESH_INTERVAL);
}

// 捕获到5xx错误时额外触发即时重试
self.addEventListener('fetch', (e) => {
  e.respondWith(
    fetch(e.request)
      .then(response => {
        if (response.status >= 500 && response.status < 600) {
          startRefreshTimer();
          setTimeout(async () => {
            const clients = await self.clients.matchAll({ type: 'window' });
            clients.forEach(client => client.navigate(client.url));
          }, 2000); // 错误后2秒重试，可自行修改
        }
        return response;
      })
      .catch(err => {
        setTimeout(async () => {
          const clients = await self.clients.matchAll({ type: 'window' });
          clients.forEach(client => client.navigate(client.url));
        }, 2000);
        return err;
      })
  );
}

注意事项 #

• sw.js必须放在站点根目录，才能控制全站路径的请求
• 可根据需求自行调整代码中的刷新间隔和错误重试等待时间

方案2：iframe嵌套方案（逻辑更简单，易维护） #

如果不想接触Service Worker的复杂逻辑，可以做一个极简的外层父页面，父页面做成纯静态资源保证高可用不会报错，由父页面统一控制内层业务页面的刷新。

实现代码 #

父页面代码示例：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <style>
    * { margin: 0; padding: 0; }
    iframe { width: 100vw; height: 100vh; border: none; }
  </style>
</head>
<body>
  <iframe id="contentFrame" src="/你的实际业务页面路径"></iframe>
  <script>
    const REFRESH_INTERVAL = 30 * 1000; // 刷新间隔，单位毫秒，可自行修改
    setInterval(() => {
      // 加时间戳避免浏览器缓存
      document.getElementById('contentFrame').src = `/你的实际业务页面路径?${Date.now()}`;
    }, REFRESH_INTERVAL);
  </script>
</body>
</html>

注意事项 #

• 父页面建议部署为纯静态资源，不要走后端动态接口，避免本身出现502错误
• 如果业务页面有跨域限制，需要调整对应的跨域配置允许被嵌套

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