jquery - 各个页面上的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();
    }
  }
};

因此，我检查是否应该使用弹出状态以及是否仍在可以重新应用更新信息(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

特别是这部分:

Syntax

location.reload(forceGet)

Parameter Values

forceGet Boolean Optional.

Specifies the type of reloading: false - Default. Reloads the current page from the cache. true - The current page must be reloaded from the server

所以在“else”部分尝试这个代码:

location.reload(true);