需要兩次點擊後退按鈕才能觸發popstate/statechange事件

我有一個包含iframe的頁面。 iframe可以接受用戶的輸入（通過按鈕點擊或菜單選擇）並相應地顯示內容。我需要的是，當用戶操作iframe時，瀏覽器將每組iframe參數推入歷史;當用戶點擊後退按鈕時，iframe將使用上一個歷史記錄條目中保存的參數重新加載其內容。我有一段代碼進行重新加載，如下所示。需要兩次點擊後退按鈕才能觸發popstate/statechange事件

奇怪的是，當我在IFRAME（添加到歷史，因此多狀態條目）進行多項設置，然後單擊回來，它會像這樣工作

說，我的狀態4 ，3，2的歷史和我現在在狀態5

第一次點擊恢復到狀態4（「----狀態改變----」日誌消息被打印
第二點擊重新加載默認內容的iframe，「---- state changed ----」不會被打印，不會重新加載代碼
第三次點擊恢復到狀態3
第四點擊，就如同第二點擊
5日點擊恢復到狀態2

所以以後每一次點擊，成功地恢復狀態，需要兩次點擊來觸發popstate事件（我也試過statechanged事件，結果相同）並恢復到另一個先前的狀態。

任何人都知道這裏發生了什麼？提前致謝。

History.Adapter.bind(window, "popstate", 
    function (event) { 
     console.log("----state changed------", History.getState()); 
     console.log("----state data------",History.getState().data.state); 

      //code to do reload an iframe to its proper state 

    });

來源

2013-05-15 Farrell

所以我偶然發現了同樣的問題。我們遇到的情況是使用history.pushState()更新URL，然後更改的src屬性。通過更改的src，我們隱含地告訴瀏覽器添加iframe已更改的歷史記錄。因此...

當我們壓回的第一次，window.history的popstate是引發了的src屬性，並恢復到之前的狀態。
按back第二次觸發popstate事件您最初壓入堆棧

我們的解決方案涉及到，當我們決定更新URL和推動國家入棧中，當我們想要的狀態更新，我們使用jQuery來代替列表，以便...

$("#iFrameID").replaceWith(('<iframe id="iFrameID" src="' + location + '"></iframe>'

通過這樣做，我們去掉了瀏覽器歷史記錄的副作用與我們更新到標籤越來越污染。

來源

2014-01-09 22:10:46 Kevin

如果你想用你的'iframe'來做更復雜的事情，比如POST，這是行不通的。我的意思是這是可能的，但它需要一個非常完整的腳本（以處理所有邊界情況）通過Ajax執行POST。此時，您甚至不需要設置iframe的網址，但只需更新它的內容，此時這個簡單的解決方案可悲地變得沒有實際意義。：/我仍然在尋找一種更簡單的方法來處理... – Domi

我有同樣的問題。而不是導航用戶到網站上的上一頁，後退按鈕導航用戶到iframe中的上一頁。下面的代碼將幫助你解決你的問題：

iframe.contentWindow.location.replace(href)

來源

2015-08-14 15:16:52 user3918128

需要兩次點擊後退按鈕才能觸發popstate/statechange事件

回答

相關問題