Question

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

的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），但我仍然有相同的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 =负载-21
在这种情况下，刷新页面时，我会留在graph.html。

现在我的问题是，这两个电话有什么区别？此外，从我在谷歌搜索后的第一印象，我认为第二次电话不是一个好的做法。因此，我想使用第一个电话，但我需要在刷新页面时继续graph.html。

由于

Answer 1

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

它使用 AJAX 将网页加载到 DOM 。只有第一页完全加载，这意味着 HEAD 并且 BODY 内容已加载到 DOM 。每个后续的 HTML 页面都会被丢弃，基本上只有 data-role="page" 的div才能加载到 DOM < / strong>即可。更多只会加载一个 data-role="page" div，其他每个页面div都将被丢弃，就像页面的其余部分一样。

如果你想一想，这是一个正常的状态。我们已从最初的 HEAD 页面获得 HTML ，我们不需要其他页面。

这就是说，当您将参数从一个 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 时只有 data-role="page" div才能加载到 DOM 中。基本上只有您的解决方案的缺点是每个 HTML 文件只能有一个data-role =“page”。在第一种情况下 index.html 的内容可能会超过一页。

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

1 个答案:

编辑：