使用脚本实现浏览器后退导航的事件

Question

我需要知道用户是否在浏览器中点击了后退导航箭头。我使用了以下事件，但在我点击后退导航箭头时没有发生此事件。

$(window).on("navigate", function (event, data) {

});

如果您知道的话，请提供您的答案。

- arun d

Answer 1

您可以使用历史记录的popstate。

只有通过浏览器操作（例如单击后退按钮（或在JavaScript中调用history.back（）））才会触发popstate事件。当用户在同一文档的两个历史记录条目之间导航时，才会触发该事件。

您需要添加一个具有相同标题且URL没有变化的新条目到历史记录中。

pushState(state, title, url)

当你拦截onpopstate事件时，你将执行所需的操作，解除绑定事件，然后使用history.back() API。

window.onpopstate = function(event) {
  alert("location: " + document.location + ", state: " + JSON.stringify(event.state));
  window.onpopstate = null;
  history.back();
};

history.pushState({}, document.title, "");

这不是经过验证的方法，我只在Chrome中测试过。

- Sagi

---

请使用我的答案顶部的箭头感谢我（此答案有用）。 - Sagi

Answer 2

简短回答 —— 你做不到。

详细回答 —— 咳嗽，你真的真的做不到。

至少不是以你期望的方式。你能做的最好的方法是检测用户何时离开页面——虽然这并不一定意味着点击了后退按钮。另外，你不能阻止他们离开页面。

window.onbeforeunload = function(){
    return 'Leave this page?';
};

使用onbeforeunload事件，您可以运行一些任意代码 - 但浏览器将显示一个模态对话框，询问用户是否要离开页面或留在页面上。您无法覆盖此操作。

- Dal Hundal