使用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(); 
}); 

因此，每次单击某个链接时，它将删除当前活动节点之后的所有页面。