如何用JS强制重载页面？解决内网站点缓存更新及无限刷新问题

一、修复无限刷新问题并实现强制重载 #

你之前的代码陷入无限循环，核心原因是每次页面加载都会把lastDatetime设为当前时间，下一次加载时dateNow必然大于这个值，导致永远触发刷新逻辑。要解决这个问题，需要用站点的实际更新时间作为判断依据，而非本地时间：

1. 步骤1：在HTML中添加更新标记 #

在页面的<head>里加入一个meta标签，存放站点的最新更新时间（每周更新时手动修改这个值，或由后端自动生成）：

<meta name="site-update-time" content="2024-05-20">

2. 步骤2：正确的强制刷新JS代码 #

window.addEventListener('load', function() {
  // 获取站点最新更新时间
  const siteUpdateTime = document.querySelector('meta[name="site-update-time"]').content;
  const lastKnownUpdate = localStorage.getItem('site-last-update');

  // 本地无记录，或记录的更新时间早于站点当前更新时间时，强制刷新
  if (!lastKnownUpdate || lastKnownUpdate < siteUpdateTime) {
    // 传入true参数，强制从服务器加载而非使用缓存
    window.location.reload(true);
    // 更新本地存储的更新时间
    localStorage.setItem('site-last-update', siteUpdateTime);
  }
});

这里location.reload(true)是关键，它会告诉浏览器跳过缓存，直接从服务器获取最新页面。

二、实现局部刷新指定div（无需jQuery） #

如果不想刷新整个页面，仅更新员工信息所在的div，可以通过fetch请求最新内容并替换目标元素的HTML：

示例代码 #

假设员工信息放在id="employee-container"的div中，后端提供一个返回最新员工信息HTML片段的接口（或静态文件路径）：

function refreshEmployeeDiv() {
  // 发起请求时指定不使用缓存
  fetch('/employee-info/latest-content.html', { cache: 'no-cache' })
    .then(response => {
      if (!response.ok) throw new Error('请求失败');
      return response.text();
    })
    .then(newHtml => {
      document.getElementById('employee-container').innerHTML = newHtml;
      // 更新本地的更新时间记录，避免重复刷新
      const siteUpdateTime = document.querySelector('meta[name="site-update-time"]').content;
      localStorage.setItem('site-last-update', siteUpdateTime);
    })
    .catch(err => console.error('刷新员工信息失败:', err));
}

// 可以在页面加载时自动触发，或添加按钮手动触发
// window.addEventListener('load', refreshEmployeeDiv);

关键注意事项 #

• 每周更新站点时，记得同步修改meta[name="site-update-time"]的content值，这样前端才能检测到更新
• 局部刷新时，确保请求的资源路径正确，且服务器端该资源没有设置过长的缓存时间

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