javascript - 如何在javascript中更改浏览器历史记录

Question

我正在创建一个小型 Web 应用程序，并在 div 中使用 ajax 加载我的页面。

每当用户单击链接时，ajax 请求页面，然后更新我的 div 和 url..在 ajax 请求之后，当我尝试刷新页面时，

它工作正常并显示当前页面，但是当我单击后退按钮时，它会更改顶部网址，但不会更改页面及其内容这是我的代码

$.ajax({ 
url: link, 
type:'POST', 
data : name, 
success: function(data) { 
$("#main").html(data);  
  history.pushState({foo:'bar'}, title, link);
  }
 }
});

Answer 1

正如 @Slaks 在评论中所说，您需要处理 window.onpopstate。

文档:

going back doesn't change the document's contents from what they were in the previous step, although the document might update its contents manually upon receiving the popstate event.

为此，您需要一个 State 对象，您可以在 pushState 调用中将其作为参数传递。状态对象是与新历史条目关联的 JavaScript 对象。 popstate 事件仅在事件历史条目发生更改时才会触发，并且它将具有 State 对象 的副本作为参数。正如文档所述，history.pushState()(和history.replaceState())方法仅添加(和修改)历史记录条目，因此:

calling history.pushState() or history.replaceState() won't trigger a popstate event. The popstate event is only triggered by performing a browser action, such as clicking on the back button (or calling history.back() in JavaScript), when navigating between two history entries for the same document.