Jquery mobile 使用jQuery Mobile 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页仍被缓存：

<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">...

换句话说，我希望滑动操作与任何浏览器的后退/前进按钮完全相同。

---

我需要刷卡来改善用户体验，因为手机上没有专用的后退/前进按钮，这似乎解决了问题

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

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