我使用history.pushState，它的工作方式就像一个魅力，除了以下问题:一旦正确操作了 url，如果您在 chromium 或 firefox 中点击“后退”，url 就会发生变化，但是页面未重新加载。
详细说明:
我们从mysite.tld开始
现在(经过一些用户交互后)我们使用 history.pushState 并将 URL 更改为 mysite.tld/some/subpage。页面会相应地重新呈现。
现在，如果您点击“后退”，网址会更改，但页面不会更改! 如果刷新，页面就会刷新。
我的天真(我是一个绝对的 javascript 菜鸟)是添加一个事件监听器，如下所示:
dom.window.addEventListener("popstate",
{
(event: Event) =>
{
dom.window.location.reload()
}
})
但是当然这会产生一些令人不快的副作用(每当网址更改时，它都会重新加载页面。对于画廊或幻灯片等情况非常不利)
最佳答案
pushstate 功能允许您在浏览器历史记录中反射(reflect)客户端应用程序的状态(URL、标题)。
这就是流程
- 用户更改应用程序的状态
- 应用程序改变了历史记录的状态
- 设置代表应用状态的数据(例如当前显示的数据)
- 设置 URL 以反射(reflect)应用程序的状态
- 用户导航(更改状态)，这会触发
popstate事件- 该事件包含一个
state属性，它是您在推送状态时设置的数据 - 您根据状态更新应用程序的 View
- 该事件包含一个
看这个例子(注释解释):
popstate.html
<!DOCTYPE html>
<html>
<head>
<title>Pushstate/Popstate</title>
</head>
<body>
<a href="javascript: void(0)">increment</a>
<div id="output">?</div>
<script type="text/javascript">
window.onload = function() {
let identifier = 0,
match,
query,
identifiererEl = document.getElementById("output");
// - Since all URL properties can be accessed clientside,
// the request data is extracted from the current URL.
// - This can be seen like an ID that the server may use
// to find the actual content
// - Note that history.state makes no sense in this case,
// since it is null when the script first runs.
match = /identifier=(\d+)/.exec(location.search);
// This emulates the behaviour of a server it won't make sense in
// a client side application
if (match) {
// Set the identifier with the data "from the server"
identifier = Number(match[1]) || 0;
// Make the view initially reflect the state
render(identifier);
}
function render(text) {
identifiererEl.textContent = text;
}
// Listen to user interaction to alter the data, render and
// push the state
document.querySelector("a").addEventListener("click", (e) => {
// Increment only for simplicity
identifier++;
render(identifier);
history.pushState(
{ identifier: identifier },
"",
`/popstate.html?identifier=${identifier}`
);
});
// Listen to state changes to update the view
window.addEventListener("popstate", (e) => {
// Here you'd determine the actual data to render.
// For simplicity the identifier itself is rendered.
render(e.state.identifier);
});
};
</script>
</body>
</html>
说到图库示例，identifier 可以是照片 ID，render() 可以更新图像的来源。当然，您负责获取所有或下一张/上一张照片(通过 AJAX 或内联到页面源中)。
关于javascript - 如何将history.pushState与浏览器的后退功能结合使用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45258517/