Question

我正在使用JavaScript加载页面，并且希望将加载的页面推送到历史记录中。
这意味着，当单击后退按钮时，将加载推入的页面。

我没有刷新页面，而是通过JavaScript加载页面。

我已经尝试过history.pushState()，但是在单击鼠标后，它没有返回任何内容。
推送历史记录和写入后，我只能使用一次：

window.onpopstate = function() {
    // do something
}

但是，我不能再使用它了。
也许我误会了window.onpopstate ...

Answer 1

window.history.back()是您想要的吗？

Answer 2

基本的单页应用程序（使用javascript加载页面，而不是具有多个单独的html / php / asp / jsp页面）可处理页面的哈希片段。对该哈希的更改将自动在历史记录中创建一个新条目，因此浏览器的go back和go forward按钮可以正常工作，就像有几个不同的HTML页面一样。

然后我们可以侦听hashchange事件，以了解哈希何时更改，然后只需替换页面内容即可。因此，在点击下面的“第1页”后，会触发hashchange事件，我们可以在此处调用将屏幕上呈现该页面的任何函数。

window.addEventListener( 'hashchange', event => {
  alert( `loading ${ window.location.hash }` );
  // const page = window.location.hash;
  // pages[ page ].render();
});

<a href="#/page1">Page 1</a>
<a href="#/page2">Page 2</a>

因此，如果您单击“第1页”，则会收到警报“正在加载第1页”。

如果您随后单击第2页链接，也会收到警报。

如果我们再单击“后退”按钮，则会再次收到警报“正在加载apge 1”，因为历史记录中的上一个链接是包含page1的哈希。

因此，使用这种“路由”技术，我们可以轻松地使后退/前进按钮正确工作，而不必诉诸pushState（）和popState（），因为我们只有一个按钮，所以对我们没有多大帮助HTML页面和JavaScript来填充它。

javascript-浏览器历史记录处理

2 个答案: