jquery mobile changepage和刷新页面

Question

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

• index.html
• graph.html
• myScript.js

由于给定参数，graph.html 正在构建内容，该参数在您在主页上执行的操作 (index.html) 中指定。在查看here 之后，当单击按钮时，我在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 的帮助下进行了 ajax 调用。 生成的URL 如下所示：http://192.168.131.11:18069/CoDEViewTest/#graph.html?ip=load-21

现在第一次调用工作正常，但如果我在graph.html 页面上按刷新 (F5)，我会自动返回主页 (index.html)，但我仍然有相同的 @987654333 @（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..

谢谢

Answer 1

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

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

如果你仔细想想，这是一种正常的状态。我们已经从初始 HTML 页面获得了 HEAD，我们不需要另一个。

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

因为 # 不存在，因此 DOM 在 jQuery Mobile 内容中完全为空，因此这里没有任何东西可以劫持加载逻辑，因此 graph.html 将再次重新加载到graph.html。

编辑：

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