HTML5：触发 popstate 时刷新页面

Question

我有一个 ajax 搜索表单，例如：

网址：/搜索/

=> 用户输入搜索词并点击按钮

=> 搜索完成并通过 ajax 在页面上的 div 中显示结果

但是：我还希望用户能够将 URL 复制并粘贴给朋友并浏览以前的搜索。因此，在触发搜索时，我将浏览器地址栏中的 url 从

/搜索/

到

/search/?q=你的关键字

使用：

window.history.pushState("", "Search for "+keyword, "/search/?q="+keyword);

这会将浏览器地址栏中的 url 更改为 /search/?q=yourkeywords 并且工作正常。

现在，点击后退按钮，浏览器地址栏再次显示 /search/，这很好。但是页面内容没有重新加载，它仍然显示来自 /search/?q=yourkeyword 的结果。

所以我补充说：

window.addEventListener("popstate", function(e) 
{   location.reload();
});

这是正确的方法吗？它在 FF 和 Chrome 等桌面浏览器中运行良好，但例如在 iOS 中，popstate 事件在 /search/ 上第一次加载搜索表单时触发，导致该页面无休止地重新加载。

正确的做法是什么？

Answer 1

2022 年新闻

当所有主要浏览器开始在页面加载时不发出 popstate 事件时，此问题已解决。所以现在简单地做应该是相对安全的：

window.addEventListener("popstate", function(e){
  location.reload();
});

现在所有主流浏览器

• 总是在用户导航（例如通过后退和前进按钮）到通过pushState() 添加的历史条目时触发popstate 事件
• 从不在网页加载时触发popstate（例如通过刷新按钮）

引用https://developer.mozilla.org/en-US/docs/Web/API/PopStateEvent：

注意：浏览器过去在页面加载时处理 popstate 事件的方式不同，但现在它们的行为相同。 Firefox 从未在页面加载时发出 popstate 事件。 Chrome 一直到 34 版，而 Safari 一直到 10.0 版。

Answer 2

最简单的解决方案是在使用pushState 时设置一个全局变量。然后，在您的 onpopstate 处理程序中检查是否已设置。例如：

window.historyInitiated = true;
window.history.pushState("", "Search for "+keyword, "/search/?q="+keyword);
...
window.addEventListener("popstate", function(e) {
  if (window.historyInitiated) {
    window.location.reload();
  }
});

Answer 3

我的建议：

window.location.href = window.location.href;

我没有测试过，但我认为它会做你想要的。