提交按钮在Chrome、Safari、Firefox中表现不一致的问题排查

这个问题出在**浏览器的后退/前进缓存（Back-Forward Cache，简称bfcache）**上。Firefox和Safari会把用户浏览过的页面完整缓存下来（包括DOM元素的状态、JS变量等），当用户点击返回按钮时，直接从缓存中恢复页面，不会重新执行页面的初始化脚本。而Chrome在处理表单页面的bfcache时，会自动重置表单元素的初始状态，所以按钮文本能恢复正常。

你的代码只在表单提交时修改了按钮状态，但没有处理页面从缓存中恢复的场景，导致Firefox和Safari返回后按钮仍保持“Please wait...”的状态。

我们可以监听pageshow事件——这个事件会在页面加载完成时触发，包括首次加载和从bfcache中恢复的情况。通过这个事件，我们可以在页面显示时强制重置按钮的状态。

步骤1：修改你的JavaScript代码 #

在原来的提交函数之外，添加pageshow事件监听：

function checkloadingForm(form) {
  form.myButton.disabled = true;
  form.myButton.value = "Please wait...";
  return true;
}

// 监听页面显示事件，重置按钮状态
window.addEventListener('pageshow', function(event) {
  // 获取表单和按钮元素（这里假设你的按钮name是myButton，表单可以通过选择器获取）
  const targetForm = document.querySelector('form');
  if (targetForm && targetForm.myButton) {
    // 重置按钮的禁用状态和文本
    targetForm.myButton.disabled = false;
    targetForm.myButton.value = "submit";
  }
});

步骤2：确保HTML中按钮的初始值正确 #

你的按钮HTML应该明确设置初始值，避免歧义：

<input type="submit" name="myButton" value="submit">

额外说明：为什么不用unload事件？ #

有些开发者会尝试用unload事件重置状态，但bfcache机制下，当页面被缓存时unload事件不会触发，所以这个方法不可靠。pageshow是专门用来处理缓存页面恢复的事件，更适合这个场景。

现在测试一下：

1. 提交表单，按钮变成“Please wait...”并禁用
2. 跳转到结果页后点击返回
3. Firefox和Safari中按钮会恢复成“submit”且可点击，和Chrome表现一致

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