jQuery Mobile何时在来回浏览时重新加载页面？

我试图尽量避免在我的移动web应用程序中来回浏览时重新加载。 JQuery Mobile似乎是为此设计的，但我有麻烦驯服这种行为。jQuery Mobile何时在来回浏览时重新加载页面？

基本上我有两页（page1和page2）。 page1有链接到page2，反之亦然。第一次加载时，两页都（i）在ajax中加载数据并（ii）相应地更改DOM结构。我使用全球var来避免重新加载数据，这很好地工作。

比方说page1（RESP page2）拥有的一切被加载后调用dom10在HTML（RESP dom20）和dom11（RESP dom21）一个DOM结构。

这里是我的问题：

我加载page1，数据加载和DOM从dom10改为dom11
然后我点击<a href="page2">click</a>，page2被加载，数据DOM被从dom20更改为dom21。到现在为止还挺好。
然后我点击<a href="page1">click</a>回去。该页面就像我用dom11离开它一样。太好了，根本没有GET电话。
我终于再次点击<a href="page2">click</a>，这就是它伤害的地方。该页面再次（GET调用）加载，数据不被检索，但DOM被设置回dom20

我可以继续点击回来回，我总是得到相同的行为。每当我点击page1时，我就会像离开它一样获取DOM，每当我点击page2时，都会调用GET，并重新加载DOM。

所以，这里是我的问题，有没有办法阻止重新加载已经加载在jQuery Mobile中的页面？

我可以想办法解决我的DOM问题，但我希望避免不必要的来电减慢我的应用。

如果你想玩它，你可以尝试它there。

非常感谢您的帮助！

PS：令人惊讶的是，我没有在Firefox和Chrome上获得相同的行为...恐怕不是那么简单。

来源

2012-02-29 Mad Echet

默认情况下JQM总是让一个AJAX请求的页面，即使你已经访问过它。如果你设置了$.mobile.page.prototype.options.domCache = true;那么只有jQM不能重新加载页面。

如果是这样，当您需要刷新页面时调用$ .mobile.changePage时，需要将reloadPage设置为true，否则页面将失效。

尽管如此，如果你这样做，所有的页面都会被添加到DOM中，导致影响性能的巨大DOM - 你需要在JS中正确处理它，这是一个不同的主题。但是想象一下，当你在DOM中有20页时，做一个开放式的$（'。myClass'）搜索。我在更老的答案中有更多细节我写道：Jquerymobile - $.mobile.changepage

来源

2012-02-29 18:22:35

谢谢，这很有道理。在我的情况下，我会确保没有太多的反斜杠，可能重新加载DOM结构并不是很糟糕，毕竟如果它清除了页面，但是，我需要确保我避免重做复杂的初始化内容，这可以通过JavaScript轻松完成。 – 2012-03-01 10:32:35

您使用的是“单页面布局”，这是通过AJAX加载的每一页：

http://jquerymobile.com/demos/1.0.1/docs/pages/page-template.html

每个链接或形式从这里将通过Ajax拉了新的一页到支持动画页面转换

我会看看多页面布局

http://jquerymobile.com/demos/1.0.1/docs/pages/page-anatomy.html

搜索部分的 '多页模板结构' 部分。

所以，你的例子是：

<!DOCTYPE html> 
<html> 
<head> 
    <title>test</title> 
    <meta charset="utf-8"> 
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" /> 
    <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script> 
    <script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script> 
    <script src="jquery/jquery-ui-1.8.18.custom.min.js"></script> 
    <script>var doNotLoadPage1Again = false; var doNotLoadPage2Again = false;</script> 
</head> 
<body> 
    <div data-role="page" id="page1"> 
    <p id="info">loading...</p> 
    <a href="#page2">page2</a> 
    <script> 
    if(!doNotLoadPage1Again) { 
     // do some heavy loading stuff 
     $("#page1 #info").html("loading done"); 
     doNotLoadPage1Again = true; 
    } 
    </script> 
    </div> 
<!-- Page 2-- > 
    <div data-role="page" id="page2"> 
    <p id="info">loading...</p> 
    <a href="#page1">page1</a> 
    <script> 
    if(!doNotLoadPage2Again) { 
     // do some heavy loading stuff 
     $("#page2 #info").html("loading done"); 
     doNotLoadPage2Again = true; 
    } 
    </script> 
    </div> 
</body> 
</html>

来源

2012-02-29 17:10:20

谢谢，它确实解决了我的具体示例。不过，我仍然喜欢分开页面，因为在我的实际情况下，它们更长，并且具有独立的用途。我会尝试深入挖掘$ .mobile.page.prototype.options.domCache，看看我是否找到了适合我的案例的完美解决方案。 – 2012-03-01 10:35:47

jQuery Mobile何时在来回浏览时重新加载页面？

回答

相关问题