Question

我有一个像ajax搜索表单：

url：/ search /

=＆GT;用户输入搜索词并单击按钮

=＆GT;搜索完成并通过页面上的div中的ajax显示结果

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

更改浏览器地址栏中的网址

/ search /

到

/ search /？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处理程序中，检查是否已设置。 E.g：

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;

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

HTML5：触发popstate时刷新页面

2 个答案: