Javascript 如何在 jQuery Mobile UI 中禁用缓存
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4660934/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How does one disable Caching in jQuery Mobile UI
提问by Serhiy
Tried...
试过...
<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">
Nothing seemes to work... so at the moment I'm fixing the problem on the server-side via...
似乎没有任何效果……所以目前我正在通过……解决服务器端的问题……
.'?x='.rand()
.'&x='.rand()
I don't want to disable the AJAX just the caching. There has to be a better way though... am I missing something?
我不想仅禁用 AJAX 缓存。必须有更好的方法……我错过了什么吗？
Thanks,
谢谢，
Serhiy
塞尔希
回答by Serhiy
Thank you for the answers guys, and even though they didn't quite work for me they did point me in the direction to find the code I was looking for.
谢谢你们的回答，尽管他们对我来说并不完全有效，但他们确实为我指明了找到我正在寻找的代码的方向。
This is the code that I found on this gentleman's Github Gist.
这是我在这位绅士的 Github Gist 上找到的代码。
https://gist.github.com/921920
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();
};
});
There is also a back button code in that Gist, but I don't seem to need it really as my back button seems to work just fine...
该 Gist 中还有一个后退按钮代码，但我似乎并不真正需要它，因为我的后退按钮似乎工作得很好......
回答by jrenouard
Have you tried to overwrite the default value ?
您是否尝试覆盖默认值？
$(document).bind("mobileinit", function(){
$.mobile.page.prototype.options.domCache = false;
});
This works for me
这对我有用
回答by Martin
Page caching is now off by default in jQM RC1. See the extract below from the jQM website about page caching: http://jquerymobile.com/demos/1.0rc1/docs/pages/page-cache.html
jQM RC1 中的页面缓存现在默认关闭。请参阅下面关于页面缓存的 jQM 网站的摘录：http: //jquerymobile.com/demos/1.0rc1/docs/pages/page-cache.html
If you prefer, you can tell jQuery Mobile to keep previously-visited pages in the DOM instead of removing them. This lets you cache pages so that they're available instantly if the user returns to them.
To keep all previously-visited pages in the DOM, set the domCache option on the page plugin to true, like this:
$.mobile.page.prototype.options.domCache = true;Alternatively, to cache just a particular page, you can add the data-dom-cache="true" attribute to the page's container:
<div data-role="page" id="cacheMe" data-dom-cache="true">You can also cache a page programmatically like this:
pageContainerElement.page({ domCache: true });The drawback of DOM caching is that the DOM can get very large, resulting in slowdowns and memory issues on some devices. If you enable DOM caching, take care to manage the DOM yourself and test thoroughly on a range of devices.
如果您愿意，可以告诉 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 并在一系列设备上进行彻底测试。
回答by naugtur
Method 1
方法一
This disables AJAX
这将禁用 AJAX
Read http://jquerymobile.com/demos/1.0a2/#docs/api/globalconfig.html
阅读 http://jquerymobile.com/demos/1.0a2/#docs/api/globalconfig.html
Set ajaxLinksEnabledto false and it will not load and cache those pages, just work as normal links.
设置ajaxLinksEnabled为 false，它不会加载和缓存这些页面，只是作为普通链接工作。
Method 2
方法二
Second idea is to remove cached elements. You can bind to pagehideevent and make it remove the page instead. If not present in DOM, the page will be loaded again.
第二个想法是删除缓存的元素。您可以绑定到pagehide事件并使其删除页面。如果 DOM 中不存在，页面将再次加载。
It can be done with this code as a proof of concept:
可以使用此代码作为概念证明来完成：
$('.ui-page').live('pagehide',function(){ $(this).remove(); });
But it needs a little work. The above code breaks the history. It prooves that you will only be able to use it with pages you intend to be leaves in your sitemap tree. Therefore you have to create a special selector for them or bind it to only certain pages.
但它需要一些工作。上面的代码打破了历史。它证明您只能将它用于您打算成为站点地图树中叶子的页面。因此，您必须为它们创建一个特殊的选择器或仅将其绑定到某些页面。
Also you can bind to a button's click or mousedown event, get its href, generate page id out of it and find the div by id to remove it before jqm tries to look for it.
您也可以绑定到按钮的 click 或 mousedown 事件，获取它的 href，从中生成页面 id 并在 jqm 尝试查找它之前通过 id 找到 div 以将其删除。
I have found no advised way of disabling the cache or forcing loading.
我没有发现禁用缓存或强制加载的建议方法。
回答by KCD
Martin's answer should be the right one in my opinion but jQuery Mobile cache the first page no matter what. https://github.com/jquery/jquery-mobile/issues/3249
Martin 的答案在我看来应该是正确的，但无论如何 jQuery Mobile 都会缓存第一页。https://github.com/jquery/jquery-mobile/issues/3249
I've opted to "patch" the behaviour of $.mobile.page.prototype.options.domCache = falseand data-dom-cache="true"
我选择“修补”$.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();
}
});
回答by Sebastian Sauer
Here's my working solution:
这是我的工作解决方案：
$('.selector').live( 'pagebeforecreate', function () {
$.mobile.urlHistory.stack = [];
$.mobile.urlstack = [];
$( '.ui-page' ).not( '.ui-page-active' ).remove();
});
I wrote an (original in German) article about that topic, maybe that helps. Link to google translated article
我写了一篇关于该主题的（德语原文）文章，也许会有所帮助。 链接到谷歌翻译的文章
