Javascript：如何在按下“返回”按钮时取消禁用按钮

Question

我有一些按钮，当被单击后，会将用户带到另一个页面，并在这之前变为禁用状态。

$(this).prop('disabled',true);

当用户在某些浏览器（如Firefox和iOS Safari）上单击“后退”按钮时，该按钮仍将保持禁用状态。我希望在单击后该按钮仍然保持禁用状态，但是当用户返回到页面时（无论是通过“后退”按钮还是其他方式），它不应再禁用。怎么做？

谢谢。

- user6122500

---

哪些浏览器会出现这种情况？您是否也使用了jquerymobile或类似的库，干扰了浏览器历史，后退按钮或使用“#”符号进行导航？ - Zim84

如果按钮会带用户到另一个页面，为什么要禁用它们呢？ - Asons

@LGSon 因为在 JavaScript 代码处理完之前，需要一些时间才能将用户带到下一页。在处理期间，我想防止用户再次点击按钮。 - user6122500

那么我认为最好的做法是将其作为问题提出，这样您就可以完全掌控整个过程，因为我相信一定有比依赖浏览器处理更好的解决方案，特别是因为它们的行为明显不同。 - Asons

Answer 1

当文档准备好时，只需启用按钮：

$( document ).ready(function() {
    $( "button" ).prop( 'disabled', false );
});

- Miguel S. Mendoza

---

谢谢，但是当在Firefox上使用“返回”功能时，这不会被触发。 - user6122500

Answer 2

添加window.addEventListener("beforeunload", function() {});会强制Firefox的行为像Chrome一样：

const appEl = document.body;
const buttonEl = document.createElement("button");
buttonEl.textContent = "button";
buttonEl.addEventListener("click", () => {
  const pEl = document.createElement("p");
  pEl.textContent = "changing page in 1 sec";
  appEl.append(pEl);
  setTimeout(() => (window.location = "//example.com"), 1000);
  buttonEl.disabled = true;
});
appEl.append(buttonEl);

window.addEventListener("beforeunload", function() {});

- marzelin