如何在 2019 年監聽 window.location.search 的變化

Question

我想在不重新加載文檔的情況下更新window.location.search ，然后根據 window.location.search 中的更新值執行window.location.search 。

當用戶單擊一個按鈕時，該按鈕的onclick事件會觸發以下 function：

window.history.pushState({action : 'myAction'}, document.title, '?action=myAction');

到目前為止，一切都很好。 window.location.search在瀏覽器 URL 欄中更新。

但我找不到檢測此更新的一般后台事件偵聽器 - 類似於onhashchange但用於查詢字符串。

我能想到的最好的是：

window.history.pushState({action : 'myAction'}, document.title, '?action=myAction');
window.history.pushState({action : 'myAction'}, document.title, '?action=myAction');
window.history.back();

window.addEventListener('popstate', () => console.log(event.state.action));

這行得通，但我相信必須有一種更優雅的方法。

Answer 1

最終答案：

我對下面的第二次嘗試答案非常滿意。

但我真的不喜歡：

history.back();
history.forward();

我采用它來手動觸發popstate事件。

在實踐中，我發現這種 hack 有時會奏效，有時會很慢，有時會完全失敗。

在紙面上，這感覺太臨時了。

經過反復搜索和試驗（這非常難找到），我終於找到了手動觸發popstate事件的正確語法。

就像dispatching這個一樣簡單：

new Event('popstate')

像這樣：

let myEvent = new Event('popstate');
window.dispatchEvent(myEvent);

所以最終的代碼是：

window.history.pushState({action : 'myAction'}, document.title, '?action=myAction');
let queryStringChange = new Event('popstate');
window.dispatchEvent(queryStringChange);

---

我能想到的最佳答案（第二次嘗試）：

建立在以下基礎上：

我確定只需要檢查查詢字符串：

1. 頁面加載或重新加載時；

2. 當window.history.pushstate被調用時；

3. 或者當（正如@Kaiido在下面的評論中敏銳地指出的那樣）通過前進和后退按鈕訪問頁面時

我也知道：

• window.load事件偵聽器涵蓋第 1 點。
• window.popstate事件監聽器涵蓋第 3 點。

這只剩下第 2 點。

---

處理第 2 點

正如MDN報告的那樣：

請注意，僅調用history.pushState()或history.replaceState()不會觸發 popstate 事件。 popstate 事件將通過執行瀏覽器操作來觸發，例如單擊后退或前進按鈕（或在 JavaScript 中調用history.back()或history.forward() ）。

來源： https://developer.mozilla.org/en-US/docs/Web/API/Window/popstate_event

但這意味着，而不是使用（如我的第一次嘗試，如下）：

window.history.pushState({action : 'myAction'}, document.title, '?action=myAction');

checkQueryString(); // DIRECT INVOCATION OF FUNCTION

我可以改用：

window.history.pushState({action : 'myAction'}, document.title, '?action=myAction');
history.back();
history.forward();

這意味着不需要直接調用 function，我現在可以允許相同的window.popstate事件偵聽器覆蓋第 3 點來完成其工作，從而為我提供更清晰、邏輯上更分離的代碼。

---

注意我覺得......很奇怪......單獨按下前進按鈕將觸發window.popstate事件監聽器，但調用window.history.pushState()不會......（需要立即添加history.back(); history.forward();復制前進按鈕的功能）。

但是，如上所述，這是我能想到的最好、最干凈、最優化（就邏輯分離和未來代碼維護而言）的解決方案。 如果有人有更好的主意，我很樂意轉移綠色勾號。

---

第一次嘗試回答：

我暫時得出結論，沒有辦法使用可以檢測查詢字符串何時更新的后台事件偵聽器來實現此效果。

相反，因為我確定只需要檢查查詢字符串：

• 當頁面加載或重新加載時
• 當window.history.pushstate被調用時

我可以使用以下內容：

window.addEventListener('load', checkQueryString);

和

window.history.pushState({action : 'myAction'}, document.title, '?action=myAction');

checkQueryString();