如何在 jQuery Mobile UI 中禁用缓存

Posted 2023-05-09

【中文标题】如何在 jQuery Mobile UI 中禁用缓存

【英文标题】：How does one disable Caching in jQuery Mobile UI

【发布时间】：2011-06-07 08:26:11

【问题描述】：

试过了...

<div data-role="page" data-cache="30"> 
<div data-role="page" data-cache="never">
<div data-role="page" data-cache="false"> 
<div data-role="page" cache="false">

似乎没有任何效果...所以目前我正在通过...解决服务器端的问题...

.'?x='.rand()
.'&x='.rand()

我不想只禁用缓存的 AJAX。不过必须有更好的方法……我错过了什么吗？

谢谢，

赛尔希

【参考方案1】：

感谢你们的回答，尽管他们对我不太有用，但他们确实为我指明了找到我正在寻找的代码的方向。

这是我在这位先生的 Github Gist 上找到的代码。

https://gist.github.com/921920

jQuery('div').live('pagehide', function(event, ui)
  var page = jQuery(event.target);

  if(page.attr('data-cache') == 'never')
    page.remove();
  ;
);

该要点中还有一个后退按钮代码，但我似乎并不需要它，因为我的后退按钮似乎工作得很好......

【讨论】：

请注意，从 jQuery 1.7 开始，.live() 方法已被弃用，取而代之的是 .on()。所以一个更新的例子是jQuery(document).on('pagehide', 'div', function(event, ui) ... );

还要小心，因为这也会删除对话框的父级，从而破坏界面。您需要类似：if (ui.nextPage && ui.nextPage[0] && $(ui.nextPage[0]).is('.ui-dialog')) return; 在第 1 行和第 2 行之间。

另外两件要考虑的事情：1) 浏览器仍然可以缓存页面，我也必须阻止它才能让它工作。 2) 您可以将 page.attr('data-cache') 更改为 page.data('cache') 以允许动态缓存决策。

【参考方案2】：

页面缓存现在在 jQM RC1 中默认关闭。请参阅 jQM 网站关于页面缓存的以下摘录：http://jquerymobile.com/demos/1.0rc1/docs/pages/page-cache.html

如果您愿意，可以告诉 jQuery Mobile 将以前访问过的页面保留在 DOM 中，而不是删除它们。这使您可以缓存页面，以便在用户返回时立即可用。

要将所有以前访问过的页面保留在 DOM 中，请将页面插件上的 domCache 选项设置为 true，如下所示：

$.mobile.page.prototype.options.domCache = true;

或者，要仅缓存特定页面，您可以将 data-dom-cache="true" 属性添加到页面的容器中：

<div data-role="page" id="cacheMe" data-dom-cache="true">

您也可以像这样以编程方式缓存页面：

pageContainerElement.page( domCache: true );

DOM 缓存的缺点是 DOM 可能会变得非常大，从而导致某些设备速度变慢和内存问题。如果您启用 DOM 缓存，请注意自己管理 DOM 并在一系列设备上进行全面测试。

【讨论】：

仅供参考，DOM 缓存已关闭，但我认为仍有一些其他类型的缓存会导致动态 Web 应用程序出现问题。我正在使用 1.0 版本，我发现我的应用存在缓存问题。从缓存中强制删除页面的公认答案似乎可以缓解问题。

这可能是解释——“jQuery Mobile 总是缓存第一页”forum.jquery.com

【参考方案3】：

您是否尝试过覆盖默认值？

$(document).bind("mobileinit", function()
    $.mobile.page.prototype.options.domCache = false;
);

这对我有用

【参考方案4】：

方法一

这会禁用 AJAX

阅读 http://jquerymobile.com/demos/1.0a2/#docs/api/globalconfig.html

将ajaxLinksEnabled设置为false，它不会加载和缓存这些页面，只是像普通链接一样工作。

方法二

第二个想法是删除缓存的元素。您可以绑定到pagehide 事件并使其删除页面。如果 DOM 中不存在，页面将再次加载。

可以使用此代码作为概念证明来完成：

$('.ui-page').live('pagehide',function() $(this).remove(); );

但它需要一些工作。上面的代码打破了历史。它证明您只能将它与您打算在站点地图树中留下的页面一起使用。因此，您必须为它们创建一个特殊的选择器或将其绑定到某些页面。

您还可以绑定到按钮的 click 或 mousedown 事件，获取其 href，从中生成页面 id，并通过 id 找到 div 以在 jqm 尝试查找之前将其删除。

我没有发现禁用缓存或强制加载的建议方法。

【参考方案5】：

Martin 的答案在我看来应该是正确的，但无论如何 jQuery Mobile 都会缓存第一页。 https://github.com/jquery/jquery-mobile/issues/3249

我选择“修补”$.mobile.page.prototype.options.domCache = false 和 data-dom-cache="true" 的行为

$(document).on('pagehide', function (e) 
    var page = $(e.target);
    if (!$.mobile.page.prototype.options.domCache
        && (!page.attr('data-dom-cache')
            || page.attr('data-dom-cache') == "false")
        ) 
        page.remove();
    
);

【参考方案6】：

这是我的工作解决方案：

$('.selector').live( 'pagebeforecreate', function () 
    $.mobile.urlHistory.stack = [];
    $.mobile.urlstack = [];
    $( '.ui-page' ).not( '.ui-page-active' ).remove();
);

我写了一篇关于该主题的（德语原文）文章，也许这会有所帮助。 Link to google translated article

【讨论】：

谢谢，但我对这种方法也没有任何运气...这是什么版本... alpha 或 beta...？