如何在发送同步请求时禁用页面所有按钮并解决BFcache遗留问题

BFcache（前后向缓存）会完整保存页面的DOM状态，包括按钮的disabled属性，所以你之前通过beforeunload禁用按钮后，从缓存返回页面时按钮会保持禁用状态。要解决这个问题，需要结合请求前主动禁用和BFcache恢复时重置状态两个步骤：

1. 封装按钮状态控制方法 #

先写一个通用函数来统一控制所有按钮的启用/禁用：

function toggleButtons(enable) {
  const buttons = document.getElementsByTagName("button");
  Array.from(buttons).forEach(btn => btn.disabled = !enable);
}

2. 发起同步请求前禁用按钮 #

不要依赖beforeunload来禁用，而是在触发同步请求的时机（比如表单提交、按钮点击发起请求）直接调用禁用方法：

// 示例：表单提交触发同步请求
document.querySelector('form').addEventListener('submit', () => {
  toggleButtons(false);
});

// 示例：手动发起同步XHR请求
function sendSyncGetRequest() {
  toggleButtons(false);
  const xhr = new XMLHttpRequest();
  xhr.open('GET', '/your-api-url', false); // 同步请求
  xhr.send();
  
  // 同步请求完成后（如果页面未卸载）恢复按钮
  toggleButtons(true);
}

3. 监听pageshow事件恢复BFcache页面的按钮状态 #

当页面从BFcache加载时，会触发pageshow事件，通过event.persisted可以判断是否来自缓存，此时重置按钮状态：

window.addEventListener('pageshow', (event) => {
  if (event.persisted) {
    toggleButtons(true);
  }
});

为什么之前的代码无效？ #

你之前给按钮绑定click事件来禁用，只是在点击后触发，但BFcache恢复时页面保留的是之前卸载时的DOM状态（按钮已禁用），不会触发点击事件，所以必须通过pageshow事件主动重置。

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