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

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

jquery-mobile

Jquery mobile jQuery Mobile在来回浏览时何时重新加载页面？,jquery-mobile,Jquery Mobile,在我的移动webapp中来回浏览时，我尽量避免重新加载。jquerymobile似乎就是为此而设计的，但我很难控制这种行为基本上，我有两页（page1和page2）第1页有到第2页的链接，反之亦然。第一次加载它们时，这两个页面（i）在ajax中加载数据，（ii）相应地更改DOM结构。我使用全局var来避免重新加载数据，这非常有效假设page1（resppage2）在html中有一个名为dom10（respdom20）的DOM结构，并且在加载所有内容后有一个名为dom11（respdom21）

在我的移动webapp中来回浏览时，我尽量避免重新加载。jquerymobile似乎就是为此而设计的，但我很难控制这种行为

基本上，我有两页（

page1

和

page2

）<代码>第1页有到第2页的链接，反之亦然。第一次加载它们时，这两个页面（i）在ajax中加载数据，（ii）相应地更改DOM结构。我使用全局

var

来避免重新加载数据，这非常有效

假设

page1

（resp

page2

）在html中有一个名为

dom10

（resp

dom20

）的DOM结构，并且在加载所有内容后有一个名为

dom11

（resp

dom21

）的DOM结构

我的问题是：

我加载
```
page1
```
，加载数据并将DOM从
```
dom10
```
更改为
```
dom11
```
然后单击
，加载
```
page2
```
，检索数据，DOM从
```
dom20
```
更改为
```
dom21
```
。到目前为止还不错
然后单击
返回。该页面与我在
```
dom11
```
中留下的页面一样。好极了，根本没有
```
GET
```
电话
最后，我再次点击
，这就是我受伤的地方。再次加载页面（
```
GET
```
call），不检索数据，但dom被设置回
```
dom20
```

我可以继续向前点击，我总是得到同样的行为。每当我点击

page1

时，我就会像离开它一样得到DOM，每当我点击

page2

时，就会有一个

get

调用，DOM会被重新加载

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

我可以想办法让我的DOM符合我的要求，但我希望避免不必要的调用减慢我的应用程序

如果你想玩它，你可以试试

非常感谢你的帮助

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

您使用的是“单页布局”，它通过ajax加载每个页面：

这里的每个链接或表单都将通过Ajax拉入一个新页面，以支持动画页面转换

我会看看多页布局

搜索“多页模板结构”部分

你的例子是：

<!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>


测试
var doNotLoadPage1Again=false；var doNotLoadPage2Again=false；
正在加载
如果（！doNotLoadPage1Again）{
//做一些重负荷的事情
$（“第1页信息”）.html（“加载完成”）；
doNotLoadPage1Again=真；
}
默认情况下，jQM总是对页面发出AJAX请求，即使您以前已经访问过它。如果将$.mobile.page.prototype.options.domCache设置为true则只有jQM不会重新加载页面
如果需要刷新页面，则在调用$.mobile.changePage时需要将reloadPage
设置为true，否则页面将过时
但是要小心，如果你这样做，你的所有页面都会被附加到DOM中，从而导致一个影响性能的巨大DOM——你需要在JS中正确地管理它，这是一个不同的主题。但是想象一下，当DOM中有20个页面时，执行一个开放式$（'.myClass'）搜索。在我写的一个旧答案中，我有更多的细节：
谢谢，这很有道理。在我的例子中，我将通过这样做来确保没有太多的反序列化，如果DOM结构清除了页面，那么重新加载DOM结构可能不会太糟糕，但是，我需要确保避免重做复杂的初始化内容，这可以通过javascript轻松完成。谢谢，它确实解决了我的具体示例。然而，我仍然喜欢有单独的页面，因为在我的实际情况下，他们是更长的，有单独的目的。我将尝试深入挖掘$.mobile.page.prototype.options.domCache，看看是否能找到适合我的案例的完美解决方案。