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

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

1 个答案: