如何使用带有history.pushstate和popstate的后退button触发更改?

当谈到js时,我几乎是个新手,所以如果我错过了一些非常简单的东西,我很抱歉。

基本上,我已经做了一些研究,使用history.pustate和popstate,我做了这样一个查询string被添加到URL( ?v=images )或( ?v=profile )的末尾… ( v意思是“视图”)通过使用这个:

 var url = "?v=profile" var stateObj = { path: url }; history.pushState(stateObj, "page 2", url); 

我想这样做,所以我可以加载到div的内容,但没有重新加载我已经完成使用.load()函数的页面。

然后我使用这个代码:

 $(window).bind('popstate', function(event) { var state = event.originalEvent.state; 

$(document).ready()部分,稍后在<script>标签内尝试,并且都不起作用。

我不知道该怎么做,所以当我使用后退button时,内容会发生变化,或者至less这样做,我可以触发我自己的function; 我假设它与状态对象有关? 我似乎无法在网上find任何能清楚解释这个过程的东西。

如果有人能帮助我,这将是惊人的,并提前感谢任何人!

popstate只有一个状态时才有。

当它是这样的:

  1. 初始页面加载
  2. 新的页面加载,通过pushState添加状态
  3. 后退button

那么就没有状态,因为初始页面是定期加载的,而不是pushState 。 结果, onpopstate事件被触发, statenull 。 所以当它是null ,这意味着应该加载原始页面。

你可以实现它,这样history.pushState将被一致地调用,你只需要提供一个状态改变function,像这样: 点击这里查看jsFiddle链接

 function change(state) { if(state === null) { // initial page $("div").text("Original"); } else { // page added with pushState $("div").text(state.url); } } $(window).on("popstate", function(e) { change(e.originalEvent.state); }); $("a").click(function(e) { e.preventDefault(); history.pushState({ url: "/page2" }, "/page2", "page 2"); }); (function(original) { // overwrite history.pushState so that it also calls // the change function when called history.pushState = function(state) { change(state); return original.apply(this, arguments); }; })(history.pushState);