如何在jQuery Mobile UI中禁用缓存

27

尝试了一下...

<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,只是想禁用缓存。但肯定有更好的方法……我是不是漏掉了什么? 谢谢,Serhiy
6个回答

36

感谢大家的答案,即使它们对我并没有完全起作用,但它们确实指引了我找到我需要的代码。

这是我在这位绅士的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();
  };
});

那个Gist中也有一个返回按钮的代码,但实际上我好像并不需要它,因为我的返回按钮似乎完全正常...


8
简短说明:自 jQuery 1.7 起,.live() 方法被废弃,应使用 .on() 方法。因此,更新后的示例代码为 jQuery(document).on('pagehide', 'div', function(event, ui) { ... }); - stereoscott
还要小心,因为这也会删除对话框的父级,破坏界面。你需要像这样的东西:在第1行和第2行之间加入 if (ui.nextPage && ui.nextPage[0] && $(ui.nextPage[0]).is('.ui-dialog')) return; - cherouvim
需要考虑的另外两点是:1)浏览器仍然可以缓存页面,我也必须防止它才能让这个工作。2)你可以将 page.attr('data-cache') 改为 page.data('cache'),以便允许动态缓存决策。 - Edyn

5

您尝试过覆盖默认值吗?

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

这对我来说是有效的


5

jQM RC1中默认关闭了页面缓存功能。以下是摘自jQM网站关于页面缓存的内容:http://jquerymobile.com/demos/1.0rc1/docs/pages/page-cache.html

如果需要,您可以告诉jQuery Mobile保留先前访问过的页面而不是删除它们。这样可以缓存页面,以便用户返回时可以立即使用。

要将所有以前访问过的页面保留在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并在各种设备上进行彻底测试。


5
提供信息,DOM缓存已关闭,但我认为仍存在其他类型的缓存会导致动态Web应用程序出现问题。我使用的是1.0版本,发现我的应用程序存在缓存问题。采用强制从缓存中移除页面的被接受答案似乎可以减轻这些问题。 - John B
可能的解释是 - "jQuery Mobile总是缓存第一个页面" forum.jquery.com - KCD

4

方法1

这将禁用AJAX。

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

ajaxLinksEnabled设置为false,它就不会加载和缓存那些页面,只会像普通链接一样工作。

方法2

第二种方法是删除缓存的元素。您可以绑定到pagehide事件并使其删除该页面。如果在DOM中不存在,则会重新加载该页面。

可以使用以下代码作为概念证明:

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

但是还需要做一些工作。上面的代码会破坏历史记录。这证明你只能在网站地图树中打算作为叶子节点使用它。因此,您必须为它们创建一个特殊的选择器或将其绑定到只有某些页面。
此外,您可以绑定到按钮的单击或鼠标按下事件,获取其href,生成页面id并通过id查找div以在jqm尝试查找之前删除它。
我没有发现禁用缓存或强制加载的建议方法。

2
我认为Martin的回答应该是正确的,但是无论如何jQuery Mobile都会缓存第一个页面。我选择“修补”$.mobile.page.prototype.options.domCache = falsedata-dom-cache="true"的行为。 https://github.com/jquery/jquery-mobile/issues/3249
$(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();
    }
});

1
这是我的有效解决方案:
$('.selector').live( 'pagebeforecreate', function () {
    $.mobile.urlHistory.stack = [];
    $.mobile.urlstack = [];
    $( '.ui-page' ).not( '.ui-page-active' ).remove();
});

我写了一篇关于这个主题的文章(原文是德语),也许可以帮到你。 链接到谷歌翻译的文章


谢谢,但我使用这种方法也没有成功......这是哪个版本......alpha 还是 beta......? - Serhiy

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接