Question

所以我在stackoverflow上阅读了几个问题/答案并搜索了问题，我似乎无法让event.state回来，除了null

我知道它不能用于jQuery事件，但当我做这样的事情时：

window.onpopstate = function (e) {
     console.log(e.state)
}

jQuery.ajax成功调用

history.pushState({ lastUrl: data.State }, data.Title, data.UrlKey);

Chrome（v19）或Firefox（v12）都不会返回任何空值？我错过了什么吗？是不是没有完全实施？

Answer 1

e.state指的是被推送的倒数第二个状态。您需要将e.state的状态至少推送两次才能成为null。这是因为您应该在第一次加载站点时保存状态，然后每次更改状态时保存状态。

Answer 2

我认为这个问题需要一个更明确的解释，因为句子＆＃34;第二个被推的状态＆＃34;在其他答案中可能会导致混淆。

当我们执行history.pushState时，我们正在将历史堆栈推入一个新状态，该状态将成为当前状态（我们可以从导航栏的URL中看到）。

window.onpopstate事件意味着正在弹出顶级历史状态（从堆栈中取出），因此e.state现在将指向堆栈中的新新顶级状态（因为导航栏将指向到上一个网址。）

Answer 3

我在同一个问题上挣扎了好几个小时。太多小时了。 onpopstate -handler的状态参数即使我调用了pushState（），它也是null 很多次我点击后退按钮。

我还观察到我的onclick-handler哪个调用pushState（）导致onpopstate -handler 被触发。我相信onpopstate -handler 应该只是因用户点击而被调用我在网上看到的后退按钮。但在我的情况下似乎并非如此。

浏览器中是否有错误？似乎不太可能，因为我有同样的或Chrome和FireFox上的类似问题。但可能。或者说规范中有一个＆＃34;错误＆＃34; 太复杂，无法正确实施。没有公开单元测试显示它应该如何工作。

最后我找到了一个解决方案一切都开始奏效了。这是放这两个调用我的onload-handler：

pushState (myInitialState, null, href);
pushState (myInitialState, null, href);

所以我必须进行相同的push-state（）调用 onload-handler中的TWICE！在那之后我的 onpopstate -handler开始得到参数其状态不是空的，而是我所拥有的状态以前作为参数传递给pushState（）。

我真的不明白为什么它现在有用了为什么我早些时候只打电话给pushState 一旦。

我想了解为什么它现在有效，但我已经花了太多时间来完成这个它工作。如果有人提到好的话示例代码在线解释了这一点会很好。

Answer 4

如果您曾经了解过撤消/重做堆栈，将会很有帮助，如下图所示。

实际上，历史记录像这样保存在堆栈中。您的当前状态来自当前堆栈项，并假设有一个指向它的指针；当您调用history.back()时，指针将移至堆栈的较早项目，因此onpopstate事件的状态与history.state相同。您将只获得当前指针指向的项目，该对象由history.replaceState修改或由history.pushState添加。

此过程还说明了history.length不更改的原因，因为它表示整个堆栈的长度。当您调用history.go(1)时，指针将移回到较新的项目。

当指针位于堆栈的中间位置时，调用history.pushState会导致指针上方的所有项弹出，并添加了新项，您还可以看到history'length的变化。

Answer 5

正如Jaco Briers所述，要使popstate以我们认为的工作方式工作，我们需要首先存储初始状态，以在单击浏览器的“后退”按钮时返回。这是使用jQuery的示例实现：

示例代码

$(window).on({
  // Store initial state
  'load': function() {
    window.history.pushState({
      'html': '<div id="ajax-content">' + $('#ajax-content').html() + '</div>'
    }, '', document.URL);
  },
  // Handle browser Back/Forward button
  'popstate': function(e) {
    var oState = e.originalEvent.state;
    if (oState) {
      $('#ajax-content').replaceWith(oState.html);
    }
  }
});

...

// Update AJAX content
var sUrl = 'https://www.example.com/category?id=123&format=ajax';
$.ajax({
  type: 'GET',
  url: sUrl,
  success: function(sHtml) {
    $('#ajax-content').replaceWith(sHtml);
    window.history.pushState({
      'html': sHtml
    }, '', sUrl);
  }
});

Answer 6

history.state 与当前页面相关联，因此可以使用 forward 和 back。要获取第一个历史记录的状态，您可以使用 history.replaceState 将其置于第一个历史记录的状态。

window.history.replaceState(currentState, document.title)

window.onpopstate，event.state == null？

6 个答案: