通过window.history.pushstate进行分页，以跟随“后退” /“前进”按钮

Question

我正在尝试使用后退和前进按钮无缝地进行分页工作的结果页面。 如果您单击“下一步”按钮并转到第2页。我需要后退按钮才能导航回到结果的第一页，依此类推。 “跳转到页面”按钮也是如此。 如果“活动”页面是第3页，并且单击了后退按钮，则需要“活动”按钮跟随。

我能够通过在网址后附加页码来实现此功能：

window.history.pushState({path:updateurl},'',updateurl,);

但是似乎无法使其与分页或currentPage一起使用。 我还尝试在以下领域工作：

window.history.replaceState()

在每个分页上，单击以查看我是否可以重写历史记录以恢复到最后的状态。 但是没有运气。

我知道这有点复杂。

这是我的项目的jsfiddle 。

谢谢您的帮助。

Answer 1

我没有在您的提琴中找到popstate 。 当用户单击浏览器中的后退或前进按钮时，将触发此事件，并且您可以使用document.location或event.state来设置页面。

window.onpopstate = function(event) {
  // assuming you only have 1 query
  const index = document.location.search.split("=")[1];
  // set your currentPage
  setCurrentPage(index);
};

请在此处查看MDN参考： https : //developer.mozilla.org/en-US/docs/Web/Events/popstate