Rails 6 & Bootstrap 5：浏览器回退后弹窗仍打开且无法关闭

问题原因 #

这个异常确实和浏览器的**bfcache（前后向缓存）**直接相关：

• 点击站内链接跳转时，浏览器会将当前页面的完整状态（DOM结构、样式、JS上下文）存入bfcache，以此提升回退/前进的加载速度。
• 回退页面时，浏览器直接从bfcache恢复页面，Bootstrap弹窗的打开状态和JS事件绑定会被原样保留。但缓存恢复后，弹窗的内部状态管理和事件监听会出现异常，导致关闭按钮无法触发hide()逻辑，最终表现为弹窗无法关闭。
• 外部链接无此问题，是因为跳转外部页面时，浏览器不会将当前页面存入bfcache，回退时页面会重新加载，Bootstrap JS会重新初始化，弹窗状态自然重置。

解决方案 #

1. 监听pageshow事件重置弹窗状态

利用浏览器从bfcache恢复页面时触发的pageshow事件，手动关闭弹窗并清理相关DOM状态：

window.addEventListener('pageshow', (event) => {
  if (event.persisted) { // 确认页面从bfcache恢复
    const modalEl = document.getElementById('exampleModal');
    const modalInstance = bootstrap.Modal.getInstance(modalEl);
    
    if (modalInstance) {
      modalInstance.hide();
    }
    
    // 强制清理DOM状态，避免残留样式
    modalEl.classList.remove('show');
    document.body.classList.remove('modal-open');
    const backdrop = document.querySelector('.modal-backdrop');
    backdrop?.remove();
  }
});

2. 点击站内链接前关闭弹窗

修改弹窗内的链接，点击时先关闭弹窗再跳转，从根源避免弹窗状态被缓存：

<a href="/" onclick="bootstrap.Modal.getInstance(document.getElementById('exampleModal')).hide();">Next Link to...</a>

如果担心关闭动画未完成就跳转，可以加个延迟：

<a href="/" onclick="
  const modal = bootstrap.Modal.getInstance(document.getElementById('exampleModal'));
  modal.hide();
  setTimeout(() => {}, 200); // 等待弹窗关闭动画完成
">Next Link to...</a>

3. 禁用当前页面的bfcache（不推荐）

通过设置空的onunload事件，让浏览器放弃缓存当前页面，但会降低回退加载速度，仅作为临时应急方案：

window.onunload = () => {};

为什么Bootstrap JS会失效？ #

Bootstrap Modal组件初始化时，会给关闭按钮绑定click事件监听，并维护内部状态变量（比如是否处于打开状态）。当页面从bfcache恢复时：

• 原有的JS上下文被恢复，但部分事件绑定可能因浏览器缓存机制丢失；
• 组件的内部状态没有被重置，调用hide()方法时无法触发对应的DOM操作（比如移除弹窗的show类、恢复body滚动、移除背景遮罩）；
  最终表现为关闭按钮无响应，看起来像是Bootstrap JS失效。

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