jquery移动更改页面和刷新页面

jquery mobile changepage and refresh page

本文关键字：刷新 移动 jquery      更新时间：2023-09-26

我是网络开发的新手，已经建立了一个由以下部分组成的网站：

  • index.html
  • graph.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的帮助下进行ajax调用。生成的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上。。

感谢

要理解这一点，您必须了解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

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

编辑：

我还应该注意到，您的第二个解决方案没有错，虽然不建议在某些情况下使用它，但在您的情况下，它会很好地工作。请记住，有一件事总是有HEAD内容，这将防止重新加载问题。但有一个主要区别，双方现在都变了。此时，grap.html已完全加载到DOM中，并且当您返回到index.html时，只有其的data-role="page"div将加载到DOM。基本上，您的解决方案的唯一缺点是您只能有一个数据角色="；页面"；每个HTML文件。在第一种情况下，index.html可能包含多个页面。

相关文章：