为什么我的 history.pushState 调用会导致 null 状态？答案

【问题标题】：Why does my history.pushState call result in a null state?为什么我的 history.pushState 调用会导致 null 状态？
【发布时间】：2020-12-27 21:18:46
【问题描述】：

我正在学习一些教程来学习如何使用 JS 中的历史事件来处理我的一个表单上的分页。我已将以下代码添加到更改页面的 onClick 事件中：

state = {'actionCode': 'pageChange', 'pageNum': pageNum};
window.history.pushState(state, 'Page ' + pageNum, '/subF/fileName.cfm#page' + pageNum);
console.log(state);

我最初尝试了许多其他变体，包括空白或空标题和 url 参数。

然后我将它添加到我的 JS 文件的底部以查看我必须使用的内容：

function checkState(e) {
    console.log(e);
    console.log(history.state);
}

$(function() {
    window.onpopstate = checkState;
});

在更改“页面”（运行代码的第一个 sn-p）然后单击返回按钮后，我期望看到的是一个包含 actionCode 和 pageNum 变量的 e.state 对象。相反，我看到状态显示为 null，即使在将所述对象传递给 pushState 后对象本身似乎立即保存数据：

我在转储history.state 时得到相同的空值，所以我认为问题出在push 而不是get，或者我完全误解了这些函数的工作原理。

我希望能够做的是向 checkState 添加代码，该代码查看“actionCode”并基于此采取适当的操作，引用我知道将存在于该特定 actionCode 的状态对象中的变量。

【问题讨论】：

如果触发onClick事件两次（通过两次换页），然后点击浏览器返回按钮，state是否包含第一个onClick的信息？跨度>
@Ric 是的，确实如此。这很有启发性；我可能正在研究它的工作原理有点错误。
@Nicholas 就像我在下面的回答中所说的那样，它之所以有效，是因为您正在推动 2 个状态，并且您正在执行一个实际操作，该操作将通过按“返回”来触发“popstate”事件调度浏览器的按钮。
@zhulien 谢谢。我的错误是，当我回击从第 2 页到第 1 页时，我期望我在移动到第 2 页时放入历史记录的状态在那里。我只是在查看这些状态与错误的关联；我以为他们依附于我来自的地方；不是我要去的地方。通过在页面加载时添加状态，这一切都对我有用。

标签： javascript pushstate html5-history popstate

【解决方案1】：

为了触发onpopstate 事件，您必须执行实际的“更改历史记录”操作，即单击浏览器的后退/前进按钮或手动调用history.back() / history.forward() / history.go()。简单地推送/替换状态不会触发事件。

你可以试试这个：

<script>
    window.onpopstate = function(event) {
        console.log(event);
    };

    const state1 = {'actionCode': 'pageChange', 'pageNum': 1};
    const state2 = {'actionCode': 'pageChange', 'pageNum': 2};

    history.pushState(state1, 'Page ' + state1.pageNum, '/subF/fileName.cfm#page' + state1.pageNum);
    history.pushState(state2, 'Page ' + state2.pageNum, '/subF/fileName.cfm#page' + state2.pageNum);

    history.go(-1);
</script>

在这里，history.go(-1) 的调用将加载会话历史记录中的上一页，从而触发 onpopstate 事件，您将看到该状态。

您可以在此处了解有关这些特性的更多信息：MDN page。

如果您尝试模拟处理新条目的位置/状态更改，则必须手动触发 PopStateEvent（或具有相应处理程序的任何自定义）。

const event = new PopStateEvent('popstate', { state: state });
window.dispatchEvent(event);

或者简单地说：

window.dispatchEvent(new Event('popstate'));

【讨论】：