HTML5:触发popstate时刷新页面

Question

我有一个像ajax搜索表单:

网址:/ search /

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

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

但是:我还希望用户能够将URL复制并粘贴给朋友并浏览以前的搜索.因此,当触发搜索时,我会更改浏览器地址栏中的URL

/搜索/

至

/搜索/ Q = yourkeyword

使用:

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

这会将浏览器地址栏中的网址更改为/ search /？q = yourkeywords,并且工作正常.

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

所以我补充说:

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

这是正确的方法吗？它在FF和Chrome等桌面浏览器中运行良好,但是在iOS中,popstate事件是在/ search /上首次加载searchform时触发的,导致该页面无法重新加载.

什么是正确的方法呢？

Answer 1

最简单的解决方案是在使用时设置全局变量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 2

我的建议：

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

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