為什么我的 history.pushState 調用會導致 null state？

Question

我正在學習一些教程來學習如何使用 JS 中的歷史事件來處理我的 forms 之一上的分頁。 我已將以下代碼添加到更改頁面的 onClick 事件中：

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

我最初嘗試了許多其他變體，包括空白或 null 標題和 url arguments。

然后我將它添加到我的 JS 文件的底部以查看我必須使用的內容：

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

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

更改“頁面”（運行第一段代碼）然后單擊后退按鈕后，我期望看到的是包含 actionCode 和 pageNum 變量的 e.state object。 相反，我看到 state 顯示為 null 即使 object 本身似乎在將所述 ZA8CFDE63931BD59EB266CZ 傳遞給 pushState8931BD59EB2AC9C 后立即保存數據

在轉儲history.state 時，我得到了相同的null 值，所以我認為問題在於推送而不是獲取，或者我完全誤解了這些函數的工作原理。

我期望能夠做的是將代碼添加到 checkState 以查看“actionCode”並在此基礎上采取適當的行動，引用我知道的變量將存在於 state object 中，用於該特定的 actionCode。

Answer 1

為了觸發onpopstate事件，您必須執行實際的“更改歷史記錄”操作，即單擊瀏覽器的 BACK/FORWARD 按鈕或手動調用history.back() / history.forward() / history.go() . 簡單地推動/更換 state 不會觸發事件。

你可以試試這個：

<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)的調用將從 session 歷史記錄中加載上一頁，從而觸發onpopstate事件，您將看到 state 在那里。

您可以在此處了解有關這些特性的更多信息： MDN 頁面。

如果您嘗試模擬處理新條目的位置/狀態更改，則必須手動觸發PopStateEvent （或具有相應處理程序的任何自定義事件）。

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

或者簡單地說：

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