【问题标题】:How does one disable Caching in jQuery Mobile UI如何在 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。不过必须有更好的方法……我错过了什么吗?

谢谢,

赛尔希

【问题讨论】:

    标签: javascript jquery jquery-ui jquery-mobile


    【解决方案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 &amp;&amp; ui.nextPage[0] &amp;&amp; $(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" 属性添加到页面的容器中:

    &lt;div data-role="page" id="cacheMe" data-dom-cache="true"&gt;

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

    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 = falsedata-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...?
          猜你喜欢
          • 2012-08-26
          • 1970-01-01
          • 1970-01-01
          • 2013-05-26
          • 1970-01-01
          • 1970-01-01
          • 2012-12-07
          • 1970-01-01
          • 1970-01-01
          相关资源
          最近更新 更多