如果沒有用戶交互，Chrome popstate 不會在后退按鈕上觸發

Question

我正在嘗試使用“pushState”和“popstate”事件來捕獲后退按鈕導航，但是，雖然 popstate 事件在 Firefox 中正確觸發，但它不會在 Chrome（版本 76.0.3809.87（官方構建）（64 -bit))如果沒有用戶交互。

從測試來看，似乎只有當用戶與頁面交互時才會觸發 popstate 事件（即單擊文檔上的某處）。 因此，如果您在沒有交互的情況下加載頁面並點擊返回，則不會調用 popstate 函數。

我添加了一個小提琴來展示這個： https : //jsfiddle.net/0xwvLndu/

要在 Chrome 中測試 Fiddle，只需單擊鏈接並點擊后退按鈕。 你不會看到任何警報。 然后再次單擊該鏈接，但這次單擊 Fiddle 文檔上的任意位置，然后單擊后退按鈕，然后觸發警報。

我在 Chromium 論壇上發現了一個可能與這個怪癖有關的討論，也許這已經被實施以防止濫用歷史條目 - https://groups.google.com/a/chromium.org/forum/#!topic/眨眼-dev/OCS7g72HtyI和https://github.com/WICG/interventions/issues/21#issuecomment-425609246

如果是這種情況，是否意味着不能再依賴 popstate 來捕獲“后退”按鈕操作，如果是這樣，是否有解決方案？

以下是我一直在測試的示例：

window.addEventListener('load', function() {
    history.pushState(null, null, document.URL);
});

window.addEventListener('popstate', function(event) {
    alert('test');
});

我希望無論用戶交互如何，都會在后退按鈕上觸發警報，但這在 Chrome 中不會發生。

Answer 1

嘗試添加 0 的 setTimeout

window.onpopstate = () => setTimeout(alert("Pop"), 0);

在編寫處理 popstate 事件的函數時，重要的是要考慮像 window.location 這樣的屬性已經反映了狀態更改（如果它影響了當前 URL），但文檔可能仍然不會。 如果目標是捕捉新文檔狀態已經完全到位的時刻，則應使用零延遲 setTimeout() 方法調用來有效地將其內部回調函數放在瀏覽器事件循環的末尾: window.onpopstate = () => setTimeout(doSomeThing, 0);

內容取自https://developer.mozilla.org/en-US/docs/Web/API/Window/popstate_event

在旁注中，建議不要使用它，因為瀏覽器可能會隨時刪除它。

Answer 2

正如其他人在評論中所建議的那樣，這應該是瀏覽器軟件的設計，以防止劫持其默認的后退按鈕行為。