【问题标题】:stop jQuery mobile from caching dynamic page阻止 jQuery mobile 缓存动态页面
【发布时间】:2011-10-19 10:44:26
【问题描述】:

在 jQuery mobile 中,我使用的是动态“页面”模板,其中根据用户输入插入了自定义内容。

一切正常,但是一旦页面被创建,一旦它被缓存,如果你返回并做出新的选择,就不会显示新的值。我已尝试应用以下修复:

$('#instrument').bind('pagehide', function(){
  $(this).remove();
});

确实会删除该页面,但如果您尝试导航回该页面,它不会重新初始化,我会一直被推回到我的应用程序的开头。

必须使用pagebeforecreate 将动态内容添加到页面中(实际的HTML 似乎并不重要,因此我不会在此处包含它)否则将无法格式化。如果我使用pagebeforeshow,内容将不会被格式化,但如果您返回并进行新的选择,它会发生变化。

我意识到pagebeforecreate 会缓存页面,但由于内容未格式化,我似乎无法使用任何其他方法:(

我这辈子都想不出解决办法!

【问题讨论】:

    标签: jquery caching jquery-mobile


    【解决方案1】:

    尝试使用pagebeforeshow,但在显示页面时调用page() 以修复所有格式。

    像这样:

    $('#instrument').bind('pagebeforeshow', function() {
      // Do your content insertion
    });
    
    $('#instrument').bind('pageshow', function() {
      $(this).page();
    });
    

    您可能会发现这只有“一半”有效(更新页面时不会更新格式),在这种情况下您可以尝试this trick:将页面包装在一个临时元素中并调用page()包装。

    $('#instrument').bind('pageshow', function() {
      $(this).wrap('<div id="temporary-instrument-wrapper">');
      $('#temporary-instrument-wrapper').page();
      $(this).unwrap();
    });
    

    【讨论】:

    • 谢谢丹,你的第二个想法真的奏效了!我不得不删除 pagehide 上的动态内容以阻止它被添加到现有内容中(我需要将其完全替换),我还应用了一些 showhide 的东西来阻止一闪而过的无样式内容,但现在正在刷新动态值。非常感谢!
    【解决方案2】:

    新的 DOM 缓存管理功能:默认开启

    由于动画页面转换需要您所在的页面 并且您要过渡到的那个都在 DOM 中,我们添加页面 导航到 DOM。到现在为止,这些页面将 继续留在 DOM 中,直到你刷新了整个页面,所以那里 一直担心我们可能会在某些方面达到内存上限 设备并导致浏览器变慢甚至崩溃。

    对于 Beta 2,我们添加了一个简单的机制来保持 DOM 整洁。它 像这样工作:每当通过 Ajax 加载页面时,它都会被标记 导航到另一个页面后从 DOM 中删除 (从技术上讲,在 pagehide 上)。如果您返回到已删除的页面,则 浏览器可能能够从它的缓存中检索文件,或者它会 如果需要,从服务器重新请求它。在嵌套列表的情况下,我们 导航到后删除构成嵌套列表的所有页面 不属于列表的页面。包含在 多页面设置完全不受此功能的影响 - 仅页面 由 Ajax 引入的由 jQuery Mobile 以这种方式管理。

    一个名为 domCache 的新页面选项控制是否离开页面 在 DOM 中作为缓存它们的一种方式(以前的工作方式)或 保持 DOM 干净并移除隐藏页面(新方法)。默认, domCache 设置为 false 以主动管理 DOM 大小。如果你 将此设置为 true,您需要注意自己管理 DOM 并 在一系列设备上进行彻底测试。

    在单个页面上设置 domCache 选项,以便 选择性地缓存页面,您可以添加 data-dom-cache="true" 属性到页面容器或像这样以编程方式设置它:

    elem.page({ domCache: true });
    

    domCache 选项也可以全局设置。这是如何转 重新启用 DOM 缓存,使其像原来一样工作:

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

    【讨论】:

    • 感谢 Phill,我刚刚阅读了博文并更新了我的 jQuery Mobile 版本,但它对我的应用程序没有任何影响。这一定是我写它的方式 - 我想我需要更深入地挖掘。谢谢!
    • data-dom-cache="false" 在我的div 帮助!
    【解决方案3】:

    我已经用这个简单的解决方案解决了这个问题:

    在您的网址中添加另一个带有随机数字的参数,例如http://www.yourdomain.com/ws.php?opcion=1&amp;**cache_hack=" +Math.random();**

    最后一个带有随机参数的参数使“不同”调用和 jquery mobile 不缓存。-

    同时添加你的 php 脚本:

    `header("Expires: Mon, 26 Jul 1997 05:00:00 GMT");
     header("Cache-Control: no-cache");
     header("Pragma: no-cache");`
    

    【讨论】:

    • 它确实有效,但我认为 SEO 不喜欢它(如果你正在做一个互联网页面)。
    • jajajajaj 不,这是真的 ;)
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2012-12-17
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多