使用jQuery Mobile DOM缓存进行后退/前进历史导航

Question

我与swipe for history back/forward一起实施了caching the DOM。

说这是页面结构

Homepage
  Page 1
    Page 1A
  Page 2

导航时如下：

主页＆gt;第1页＆gt;第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页，你如何清除缓存中的Page 1和1A？ 所以它应该是这样的：

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

换句话说，我希望滑动与任何浏览器后退/前进按钮完全一样 （我需要轻扫以改善用户体验，因为手机上没有专门的后退/前进按钮）

Answer 1

这似乎解决了这个问题。

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

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