使用jQuery Mobile DOM缓存进行后退/前进历史记录导航 [英] Using jQuery Mobile DOM cache for back/forward history navigation

问题描述

我实现了刷卡历史记录后退/前进，以及缓存DOM .

说这是页面结构

Homepage
  Page 1
    Page 1A
  Page 2

当您按以下方式导航时:

When you navigate as follows:

首页>页面1>页面1A

Homepage > Page 1 > Page 1A

已缓存3页

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

如果您再返回两次(返回首页)并转到第2页，则仍会缓存第1页和第1A页:(

If you then go back twice (to the Homepage) and go to Page2, Page 1 and 1A are still cached :(

<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页.这也将使缓存变得巨大.

If you now swipe back from Page 2, you will get to Page 1A. This will also make the cache huge.

一旦转到第2页，如何将第1页和第1A页从缓存中清除?
所以应该是这样的:

How do you clear Page 1 and 1A out of the cache as soon as you go to Page 2?
So it should be like this:

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

换句话说，我希望滑动操作就像浏览器的后退/前进按钮一样.
(我需要滑动才能改善UX，因为手机上没有专用的后退/前进按钮)

In other words, I want the swipe to work exactly like any browser back/forward button.
(I need the swipe for improved UX because there are no dedicated back/forward buttons on mobile phones)

推荐答案

这似乎可以解决问题.

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

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

So everytime you click a link it will delete all pages after the currently active node.

这篇关于使用jQuery Mobile DOM缓存进行后退/前进历史记录导航的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！