如何刷新history.state更改页面（单击后退按钮）？答案

【问题标题】：How to refresh page on history.state change (on back button click)?如何刷新history.state更改页面（单击后退按钮）？
【发布时间】：2013-08-30 08:52:04
【问题描述】：

我正在测试新的 JS/HTML5 history 方法。在子页面加载时，我有一个更改 URL 和历史状态的事件：

$("#content").load("./content/map.txt", function() {
     history.pushState({}, "map", "map.html" );
     window.history.go(1);
});

现在当用户点击返回按钮history.state 并且 URL 发生变化时，但不会加载上一页（不刷新当前 URL）。

我尝试在 history.state 更改上添加手动刷新，我发现如下内容：

window.addEventListener('popstate', function(e){
     if (history.state){
         self.loadImage(e.state.path, e.state.note);
     }
}, false);

但它不起作用。

【问题讨论】：

这与历史功能没有太大关系，而是在浏览器中缓存以及您如何处理它。也使用 window.history.back，同样的事情。

标签： javascript html browser-history

【解决方案1】：

试试这个：

window.onpopstate = function(event) {
  if(event.state["map"] == "some_state") // get the current state from the event obj
    location.reload(); // reloads the current page to clear ajax changes
};

【讨论】：

这违背了不必重新加载页面的整个想法。
然后他可以在方法中做任何他想做的事情，而不是 location.reload();。关键是这适用于监听状态变化并获取当前状态。