javascript

Question

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

我没有刷新页面，我正在通过 JavaScript 加载它。

我已经试过了history.pushState()但是点击后退后，return什么也没有。
我在push history时和write后都可以用一次：

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 事件以了解哈希何时更改，然后只替换页面的内容。因此，在单击下面的 'page 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>

因此，如果您单击 'page1'，您将收到警报 'loading page 1'。

如果您随后单击第 2 页 link，您也会收到提醒。

如果我们然后单击后退按钮，我们会再次收到警报 'loading apge 1'，因为我们历史记录中的前一个 link 是包含 page1.

的哈希值

因此使用 'routing' 的这种技术，我们可以轻松地让 back/forward 按钮正常工作，而不必求助于 pushState() 和 popState()，这对我们因为我们只有一个 HTML 页和 javascript 来填充它。

javascript - 浏览器历史操作

javascript - browser history manipulating

browser

history

back