HTML5：觸發 popstate 時刷新頁面

Question

我有一個 ajax 搜索表單，例如：

網址：/搜索/

=> 用戶輸入搜索詞並單擊按鈕

=> 搜索完成並通過 ajax 在頁面上的 div 中顯示結果

但是：我還希望用戶能夠將 URL 復制並粘貼給朋友並瀏覽以前的搜索。 因此，當觸發搜索時，我將瀏覽器地址欄中的 url 從

/搜索/

到

/search/?q=你的關鍵字

使用：

window.history.pushState("", "Search for "+keyword, "/search/?q="+keyword);

這會將瀏覽器地址欄中的 url 更改為 /search/?q=yourkeywords 並且工作正常。

現在，點擊后退按鈕，瀏覽器地址欄再次顯示 /search/，這很好。 但是頁面內容沒有重新加載，它仍然顯示來自 /search/?q=yourkeyword 的結果。

所以我補充說：

window.addEventListener("popstate", function(e) 
{   location.reload();
});

這是正確的方法嗎？ 它在 FF 和 Chrome 等桌面瀏覽器中運行良好，但例如在 iOS 中，popstate 事件在 /search/ 上第一次加載 searchform 時觸發，導致該頁面無休止地重新加載。

正確的方法是什么？

Answer 1

最簡單的解決方案是在使用pushState時設置全局變量。 然后，在onpopstate處理程序中，檢查是否已設置。 例如：

window.historyInitiated = true;
window.history.pushState("", "Search for "+keyword, "/search/?q="+keyword);
...
window.addEventListener("popstate", function(e) {
  if (window.historyInitiated) {
    window.location.reload();
  }
});

Answer 2

我的建議：

window.location.href = window.location.href;

我沒有測試它，但我認為它會做你想要的。

Answer 3

2022 年的新聞<\/h2>

當所有主要瀏覽器開始在頁面加載時不發出 popstate 事件時，此問題已解決。所以現在簡單地做應該是相對安全的：

 window.addEventListener("popstate", function(e){ location.reload(); });<\/code><\/pre>
現在所有主流瀏覽器

   
   
 
    
當用戶導航（例如通過后退和前進按鈕）到通過pushState()<\/code>添加的歷史條目時，總是<\/strong>觸發popstate<\/code>事件<\/li>
 
    
加載網頁時從不<\/strong>觸發popstate<\/code>狀態（例如通過刷新按鈕）<\/li><\/ul>
引用自https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/PopStateEvent<\/a> ：
 
          
 
           
注意<\/strong>：瀏覽器過去在頁面加載時處理 popstate 事件的方式不同，但現在它們的行為相同。 Firefox 從未在頁面加載時發出 popstate 事件。 Chrome 一直到 34 版，而 Safari 一直到 10.0 版。
           <\/blockquote>"