各个页面上的 history.pushState 和 window.onpopstate答案

【问题标题】：history.pushState and window.onpopstate over various pages各个页面上的 history.pushState 和 window.onpopstate
【发布时间】：2014-04-01 09:41:26
【问题描述】：

我有一个使用 AJAX 更改内容并使用 history.pushstate 更新 URL 的页面。在一些更新之后，它们之间的来回切换也可以正常工作，这要归功于 window.onpopstate。

onpopstate 的代码是：

window.onpopstate = function (e) {
  if (e.state) {
    if (e.state.type == 'product-detail' && $('.product-container').length == 1) {
      updateProductDetail(e.state.html);
    }
    else {
      location.reload();
    }
  }
};

所以我检查我是否应该使用弹出状态以及我是否仍在可以重新应用更新信息的页面上（由 AJAX 调用返回的 html 数据）。如果没有（即我在另一个页面上并且无法在此处应用更新）我使用新的 Url（这是与推送状态一起存储的 url）重新加载整个页面。

这一切都按预期工作，除非我从该页面转到另一个页面然后按回。 Chrome 只显示 AJAX 请求的内容，即只显示更新的信息，没有其他任何内容（所以没有 js、css 等）。如果再次按下，Firefox 似乎会加载整个页面并继续使用 onpopstate。 Chrome 似乎只是返回并仅显示 AJAX 请求收到的数据。我尝试将整个页面（document.documentElement.outerHTML）放在推送状态的“html”属性中，但无济于事。

PS：使用 Chrome 的调试器，我可以看到从第二页按“返回”时 window.onpopstate 没有触发。

【问题讨论】：

我遇到了同样的问题，我想知道，你是怎么解决这个问题的？

标签： jquery ajax browser-history html5-history

【解决方案1】：

不知道您是否已经找到解决方案。如果没有，请查看文档

Location reload() Method on W3Schools

特别是这部分：

语法

location.reload(forceGet)

参数值

forceGet Boolean 可选。

指定重新加载的类型：假 - 默认。从缓存中重新加载当前页面。 true - 当前页面必须从服务器重新加载

所以在“else”部分试试这段代码：

location.reload(true);

【讨论】：