返回Dashboard页面后图表不显示、postToHome函数未定义问题

问题现象 #

• 餐厅报表Dashboard页面，点击调用postToHome函数的跳转链接可正常进入其他页面
• 从其他页面返回Dashboard时，图表无法显示，点击链接抛出ReferenceError: postToHome is not defined错误
• 刷新Dashboard页面后，所有功能恢复正常，且页面源码中重新出现<script type="text/javascript" src="plugins/charts/charts.js"></script>引用（返回时该引用缺失）

核心原因 #

这种情况大概率是浏览器的**前进/后退缓存（BF Cache，Back-Forward Cache）**导致的：

• 浏览器在用户导航离开页面时，会将页面状态缓存起来，当用户通过前进/后退返回时，直接从缓存恢复页面，而非重新加载所有资源
• 页面脚本（包括charts.js）未正确处理BF Cache的页面激活事件，导致缓存恢复时脚本未重新加载或初始化

解决方案 #

1. 禁用BF Cache对当前页面的缓存

在页面JavaScript中添加事件监听，强制页面从缓存恢复时重新加载：

window.addEventListener('pageshow', function(event) {
  if (event.persisted) {
    window.location.reload();
  }
});

这种方式直接有效，但会牺牲BF Cache的性能优势，适合对实时性要求高的报表页面。

2. 重新初始化脚本与图表

若不想完全禁用BF Cache，可在页面从缓存恢复时，重新加载缺失脚本并初始化图表和函数：

window.addEventListener('pageshow', function(event) {
  if (event.persisted) {
    // 检查charts.js是否已加载
    const scriptExists = document.querySelector('script[src="plugins/charts/charts.js"]');
    if (!scriptExists) {
      // 动态创建并加载脚本
      const script = document.createElement('script');
      script.type = 'text/javascript';
      script.src = 'plugins/charts/charts.js';
      script.onload = function() {
        // 脚本加载完成后重新初始化图表
        initCharts(); // 替换为你的图表初始化函数
        // postToHome若在charts.js中定义，此时会自动可用；若为自定义函数，需重新执行初始化逻辑
      };
      document.body.appendChild(script);
    } else {
      // 脚本已存在但未初始化，重新执行初始化逻辑
      initCharts();
    }
  }
});

注意：确保图表初始化函数可重复调用，避免重复执行导致冲突。

3. 适配前端路由框架（若使用）

如果项目使用Vue、React等框架，可能是路由组件缓存策略导致的：

• 比如Vue的keep-alive会缓存组件状态，返回时不会重新执行挂载钩子
• 可在组件的激活钩子中重新加载脚本、初始化图表：

// Vue组件示例
export default {
  activated() {
    this.loadChartsScript();
  },
  methods: {
    loadChartsScript() {
      // 动态加载脚本逻辑同方案2
    }
  }
}

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