Question

我需要为我的移动网站覆盖后退按钮的默认操作。如果有弹出窗口，我需要关闭它而不是回到历史记录。如果没有弹出窗口，那么后退按钮的行为就像正常一样。我正在使用反应。

Answer 1

我建议使用History API并在弹出窗口弹出时在客户端浏览器的历史记录中创建一个新的“点”或状态：

let button = document.getElementById("button");
let popup = document.getElementById("popup");

button.addEventListener("click", event => {
  state = {}; // TODO: define useful state
  history.pushState(state, "popup");
  popup.classList.toggle("hidden");
});

window.addEventListener("popstate", event => {
  popup.classList.toggle("hidden"); // TODO: evaluate `event.state`
});

.hidden {
  display: none;
}

<button id="button">Open popup!</button>
<div id="popup" class="hidden">I am the popup. Close me by clicking your browser's 'back' button.</div>

当然，随着您的应用程序变得更加复杂，您可能希望使用routing library为您处理此问题。

如何使用javascript禁用或覆盖后退按钮？

1 个答案: