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。

文档：

返回并不会改变文档的内容在上一步中，尽管文档可能会更新其内容收到popstate事件后手动。

要执行此操作，您需要State object，并将其作为pushState来电中的参数传递。状态Object是与新历史记录条目关联的javascript对象。只有当活动历史记录条目更改并且State object的副本作为参数时，才会触发popstate事件。正如文档所说，history.pushState()（和history.replaceState()）方法只添加（和修改）历史条目，原因如下：

调用history.pushState()或history.replaceState()不会触发popstate事件。 popstate事件仅在执行浏览器操作时触发，例如在同一文档的两个历史记录条目之间导航时，单击后退按钮（或在JavaScript中调用history.back()）。

如何在java脚本

1 个答案: