JqueryMobile - 刷新 ajax 加载页面答案

【问题标题】：JqueryMobile - refresh ajax loaded pageJqueryMobile - 刷新 ajax 加载页面
【发布时间】：2012-06-25 12:06:14
【问题描述】：

我使用 jquerymobile 制作了两个页面。第一个包含指向第二个的链接。

<a href="index.php/main/uploadView/" data-transition="none" data-icon="plus">Some page</a>

当我点击链接时，我会加载我的新页面。但是，如果我按 F5 按钮，我将获得没有任何 js 脚本和 css 文件的新页面。第一页的结构是：

<html>
    <head>
    ... js/css files ...
    </head>
    <body>
        <div data-role="page" id="..">
        ...
        </div>
    </body>
</html>

第二个：

<div data-role="page" id="...">
...
</div>

那么我怎样才能实现F5按钮正常工作呢？就像我将所有内容放在一页内（然后它就可以正常工作）

是否可以只更改页面的内容部分，这样我就不会一直复制粘贴页眉和页脚？

提前致谢

【问题讨论】：

标签： jquery ajax jquery-mobile

【解决方案1】：

这是旧的但有很多浏览量，我没有在其他地方看到答案......

我认为有两种解决方案，具体取决于所需的行为。

首先是在第二页和每一页上都有相同的模板 - 标题、包含等。这确保了“深层链接”和刷新将起作用，而不管浏览器是否支持 url 散列（chrome 需要这个，IE 没有它也能正常工作。）

当需要状态完整性时，这会下降。如果用户在第一页登录或搜索某些内容，并且您在第二页向他们显示结果，那么到第二页的深层链接没有任何意义，也不应该真正导航到。 F5 同上；你会在刷新时失去状态。

这导致解决方案二，如果用户通过链接或刷新进入，则重定向到第一个或“主页”页面。不要复制非索引页面的模板，只需更改标题中的位置：

<script>
    location.href = "index.html";
</script>

在 jQM 中正常的 ajax 页面导航期间，标题中的脚本不运行；这仅在直接导航到页面时运行。

this 失败的地方是当您直接导航到像 mysite/index.html#/pageTwo.html 这样的散列 URL 时。 jQM 加载 index.html，然后加载 pageTwo.html 而不处理标题脚本，但如果这是一个有状态的页面，它将无法正确显示。

您可以完全关闭 hasing：

$.mobile.changePage.defaults.changeHash = false;

如果页面需要状态，或者在 pageinit 处理程序中检查状态，然后将用户弹回您的索引页面。

【讨论】：