各种页面上的history.pushState和window.onpopstate

Question

我有一个页面，其中使用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();
    }
  }
};

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

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

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

Answer 1

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

Location reload() Method on W3Schools

特别是这部分：

  

语法

     

location.reload（forceGet）

     

参数值

     

forceGet布尔值可选。

     

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

请在“else”部分尝试此代码：

location.reload(true);