HTML5歷史記錄，后退按鈕和外部鏈接
[英]HTML5 History, Back Button and external links
問題描述
我有一個HTML5應用程序，它操縱瀏覽器歷史記錄以顯示Ajax調用的正確URL。 這很好用，但是當我的應用程序具有指向外部網站的超鏈接時會出現問題，例如http://www.google.com 。 發生這種情況時，歷史記錄如下：
我的應用頁面A - >我的應用頁面B - > Google
當用戶點擊后退按鈕一次時，一切都很好。 我的應用頁面B顯示。
但是當用戶第二次點擊后退按鈕時，URL會發生變化，但頁面不會更改。 我的應用程序無法進行正確的Ajax調用以顯示My App Page A的狀態，因為onpopstate處理程序從未被調用過。 這是因為當瀏覽器返回到我的應用頁面B時沒有初始化處理程序（沒有事件觸發該返回事件，因此我無法重新初始化處理程序。）
這種體驗適用於Chrome，但我沒有理由相信它是針對Chrome的。 有沒有解決這個問題的方法？
我知道像Gmail這樣的應用程序會在新窗口中打開所有外部超鏈接。 但是我的申請要求不允許我這樣做。
2 個解決方案
解決方案1
2 已采納 2012-06-24 17:18:06
@ Pumbaa80提供的鏈接讓我找到正確的答案。
如果您在頁面上放置<body onunload=""> ，則會破壞Chrome和其他瀏覽器上的bfcache。 這意味着當您單擊后退按鈕從Google返回我的應用頁面B時，將觸發所有頁面狀態JavaScript事件。
從谷歌回來后，沒有辦法在我的應用頁面B上調用onpopstate。 （這個不合邏輯，因為該事件只會在您點擊后退按鈕的頁面上觸發。）
另一種方法是在My App Page B加載時執行邏輯。 通過如上所述打破bfcache，jQuery dom ready將會觸發。 通過在jQuery dom ready回調中運行onpopstate中的類似代碼，我可以訪問存儲在History對象中的數據，從外部頁面返回后重置HTML5 Web應用程序的狀態。
解決方案2
0 2012-06-16 19:54:31
我認為你需要使用哈希標簽來保存你的頁面狀態，我沒有看到解決方法。 我在過去使用這個jQuery插件取得了巨大的成功，使用非常時髦的名稱BBQ（后退按鈕和查詢庫） 。 這將允許您的頁面根據URL中的哈希標記執行操作。
如何在 HTML5 中添加自定義歷史記錄以防止 android 后退按鈕在cordova 應用程序中顯示前一個視圖？
[英]How to add custom history in HTML5 to prevent android back button to display just previous view in cordova application?
Ajax / HTML5歷史狀態（popState，pushState等）-后退按鈕行為
[英]Ajax / HTML5 history states (popState, pushState, etc) - back button behavior
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.