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

Question

我是网络开发的新手，并建立了一个包含以下内容的网站：

• 的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 。

谢谢

Answer 1

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

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

如果你考虑它，这是一个正常的状态。 我们已经从最初的HTML页面获得了HEAD ，我们不需要另一个。

这就是说，当您将参数从一个HTML页面发送到另一个HTML页面时，您基本上将它发送到您的初始HTML页面。 记住我告诉你的内容，后续页面被丢弃，所以在你的案例页面graph.html不存在，它的内容被同化为index.html 。 基本上，graph.html中的一个页面现在是index.html页面。

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

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

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

在你的另一种情况下，情况有点不同。 这种情况正常工作主要是因为在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可能有一个以上的页面。