使用jQuery Mobile DOM高速緩存進行後退/前進歷史導航

Question

我實現了swipe for history back/forward以及caching the DOM。

說這是頁面結構

Homepage 
    Page 1 
    Page 1A 
    Page 2 

當您導航如下：

首頁>第1頁>第1A

3頁緩存

<div data-url="home.aspx">... 
<div data-url="page1.aspx">... 
<div data-url="page1a.aspx" class="ui-page-active">... 

如果你回去兩次（到主頁）並轉到第2頁，第1頁和第1A頁仍然是cac hed :(

<div data-url="home.aspx">... 
<div data-url="page1.aspx">... 
<div data-url="page1a.aspx">... 
<div data-url="page2.aspx" class="ui-page-active">... 

如果您現在從第2頁向後滑動，您將進入第1A頁。這也將使緩存巨大。

一旦你進入第2頁，你是如何清除第1頁和第1A頁的？
因此，它應該是這樣的：

<div data-url="home.aspx">... 
<div data-url="page2.aspx" class="ui-page-active">... 

換句話說，我要刷卡的工作完全像任何瀏覽器的後退/前進按鈕。
（我需要滑動以改進UX，因爲手機上沒有專用的後退/前進按鈕）

Answer 1

這似乎解決了問題。

$("body").on("pagecontainerbeforeload", function(event,ui) { 
    $('div.ui-page-active').nextAll('div[data-role="page"]').remove(); 
}); 

因此，每次單擊某個鏈接時，它將刪除當前活動節點之後的所有頁面。