HTML5歷史記錄，後退按鈕和外部鏈接

-1

我有一個HTML5應用程序，它操縱瀏覽器歷史記錄以顯示Ajax調用的正確URL。這很好，但是當我的應用程序超鏈接到外部網站時會出現問題，例如http://www.google.com。發生這種情況時，歷史是這樣的：HTML5歷史記錄，後退按鈕和外部鏈接

我的應用頁面A - >我的應用頁面乙 - >谷歌

當用戶點擊後退按鈕一次，一切都很好。顯示我的應用程序頁面B.

但是，當用戶第二次點擊後退按鈕時，URL會更改，但頁面不會更改。我的應用程序無法進行適當的Ajax調用來顯示My App Page A的狀態，因爲onpopstate處理程序從未被調用過。這是因爲當瀏覽器返回到我的應用程序頁面B時沒有初始化處理程序（在該事件中沒有事件觸發，所以我無法重新初始化處理程序。）

這種體驗與Chrome有關，但我沒有理由相信它是針對Chrome的。有沒有解決這個問題的方法？

我知道像Gmail這樣的應用程序會在新窗口中打開所有外部超鏈接。但是我的應用程序的要求不允許我這樣做。

來源

2012-06-16 davidgyoung

除popstate處理程序外，還應該使用onload處理程序，並且[可能需要某個卸載處理程序]（http://stackoverflow.com/questions/158319/cross-browser-onload-event-and-the-後退按鈕）來中斷瀏覽器緩存。 – user123444555621

我不明白爲什麼'onpopstate'從來沒有被叫過。每次用戶更改位置時都應該調用它。 –

@ Pumbaa80提供的鏈接使我的正確答案追蹤。

如果你把<body onunload="">放在你的頁面上，那麼就是打破了Chrome和其他瀏覽器上的bfcache。這意味着，當您單擊後退按鈕從Google返回到我的應用程序頁面B時，所有頁面狀態JavaScript事件都將觸發。

從Google返回後，沒有辦法讓onpopstate在我的應用程序頁面B上調用。（這是不合邏輯的，因爲該事件僅在您點擊後退按鈕的頁面上觸發）。

另一種方法是在加載我的應用程序頁面B時執行邏輯。通過如上所述打破bfcache，jQuery dom ready就會觸發。通過在jQuery dom就緒回調中運行onpopstate中的類似代碼，我可以訪問存儲在History對象中的數據，從外部頁面返回後重置我的HTML5 Web應用程序的狀態。

來源

2012-06-24 17:18:06 davidgyoung

我認爲你需要使用散列標籤來保存頁面的狀態，我沒有看到解決方法。我在過去使用this jQuery plugin取得了巨大的成功，其時尚名稱BBQ (Back Button & Query library)。這將允許您的頁面根據URL中的哈希標記執行操作。

來源

2012-06-16 19:54:31 ohaal

看起來你不知道HTML5的pushState可以保存狀態：https：//developer.mozilla.org/en/DOM/Manipulating_the_browser_history#The_pushState().C2.A0方法 –

@Derek：這看起來不錯，謝謝你的擡頭，將來肯定會用到它。不過，我確實看到它的支持還不夠理想，缺乏IE9及其以下的交通流量。參考：http：//caniuse.com/#search=pushState - 我的解決方案至少可以作爲後備。 – ohaal

HTML5歷史記錄，後退按鈕和外部鏈接

回答

相關問題