1

我是网络开发的新手，并建立了一个网站，其中包括：

  • 索引.html
  • 图.html
  • myScript.js

由于给定参数，graph.html 正在构建内容，该参数在您在主页 ( index.html) 中执行的操作中指定。在这里查看后，我在myScript.js单击按钮时提出了这个 changePage 调用：

$.mobile.changePage('graph.html', { dataUrl: 'graph.html?ip='+id, data: { 'ip': id }, transition: "slide", changeHash: true, reloadPage : true} );

因此，id它只是一个String（例如load-21：），我在id. 结果URL如下所示：http: //192.168.131.11 :18069/CoDEViewTest/#graph.html?ip=load-21

现在第一次调用工作正常，但如果我在graph.html页面上点击刷新（F5），我会自动返回主页（index.html），但我仍然有相同的URL（http://192.168.131.11:18069/ CodeViewTest/#graph.html?ip=load-21 ）。我想要的行为graph.html是重新加载。我发现它有效，如果我这样调用 changePage：

$.mobile.changePage('graph.html?ip=' + id, { transition: "slide", changeHash: true, reloadPage : true} );

在这种情况下，URL有点不同（注意：没有'＃'在URL）：http://192.168.131.11:18069/CoDEViewTest/graph.html?ip=load-21
在这种情况下，刷新时页面，我停留在graph.html.

现在我的问题是，这两个电话有什么区别？另外，从谷歌搜索后的第一印象来看，我认为第二次通话不是一个好习惯。因此，我想使用第一个电话，但我需要graph.html在刷新页面时保持打开状态..

谢谢

4

1 回答 1

3

要理解这一点，您必须了解 jQuery Mobile 工作原理的基础。

它用于AJAX将页面加载到DOM. 只有第一页完全加载，这意味着它HEAD和BODY内容被加载到DOM. 每个后续HTML页面都会被我大部分丢弃，基本上只有 divdata-role="page"会被加载到DOM. 甚至更多只会data-role="page"加载一个 div，每隔一个页面 div 将像页面的其余部分一样被丢弃。

如果您考虑一下，这是一种正常状态。我们已经HEAD从初始HTML页面开始，我们不需要另一个。

这就是说，当您将参数从一个HTML页面发送到另一个页面时，您基本上是将其发送到您的初始HTML页面。请记住我告诉过您的内容，后续页面将被丢弃，因此在您的情况下页面graph.html不存在，其内容被同化为index.html. 基本上，graph.html 中的页面现在是 .html 中的页面index.html。

让我们走得更远。您已经强制页面重新加载，reloadPage : true但从链接的角度来看，这仍然是index.html. 如果你看一下：

http://192.168.131.11:18069/CoDEViewTest/#graph.html?ip=load-21

/ 和 之间有一个哈希 # graph.html。这个哈希在这里是个问题。这不是错误，它只是 jQuery Mobile 的工作原理。如果在这种情况下按 F5，您将调用index.html刷新。

在你的另一种情况下，情况有点不同。这种情况可以正常工作，主要是因为您正在刷新页面和在graph.html阻止 jQuery Mobile 附加页面哈希 # 之后设置的参数。此调用充当真正的页面重新加载，最终链接如下所示：

http://192.168.131.11:18069/CoDEViewTest/graph.html?ip=load-21

因为 # don't exist 因此DOM从 jQuery Mobile 内容中完全为空，所以这里没有任何东西可以劫持加载逻辑，因此graph.html将再次重新加载到graph.html.

编辑 ：

我还应该注意，您的第二种解决方案没有任何问题，虽然在您的情况下不建议在某些情况下使用它，但它会正常工作。只要记住一件事总是有HEAD内容，这将防止重新加载问题。但是有一个主要区别，现在双方都改变了。此时grap.html已完全加载到 中，DOM而当您转回时，index.html只有它的data-role="page"div 会被加载到DOM. HTML基本上，您的解决方案的唯一缺点是每个文件只能有一个 data-role="page" 。在您的第一种情况下index.html，里面可能有不止一个页面。

于 2013-07-24T12:07:32.847 回答