jQueryMobile-刷新Ajax加载页面 [英] JqueryMobile - refresh ajax loaded page
问题描述
我使用jquerymobile制作了两页.第一个包含指向第二个的链接.
I made two pages using jquerymobile. The first one contains a link to the second.
<a href="index.php/main/uploadView/" data-transition="none" data-icon="plus">Some page</a>
当我单击链接时，我会加载新页面.但是，如果我按F5按钮，我将获得没有任何js脚本和CSS文件的新页面. 第一页的结构为:
When I click the link I get my new page loaded. But the if I press F5 button I'll get the new page without any js scripts and css files. The structure of the first page is:
<html>
<head>
... js/css files ...
</head>
<body>
<div data-role="page" id="..">
...
</div>
</body>
</html>
第二个:
<div data-role="page" id="...">
...
</div>
那么我如何才能实现F5按钮正常工作?就像我将所有内容都放在一页内一样(然后效果很好)
So how can I achieve F5 button works correctly? Like if I put all my inside one page (and then it works fine)
是否可以仅更改页面的内容部分，以便我不会一直复制粘贴页眉和页脚?
And is it possible to change only content part of page, so that I won't copy-paste header and footer all the time?
预先感谢
推荐答案
这很旧，但是浏览量却很多，在其他地方却看不到答案...
This is old but has a lot of pageviews, and I didn't see an answer elsewhere...
我认为有两种解决方案，具体取决于所需的行为.
I think there are two solutions depending on the desired behavior.
首先，在第二页和每一页上具有相同的模板-标题，包含等.这样可以确保无论浏览器是否支持url哈希，深层链接"和刷新都可以正常工作(chrome需要这样做，IE可以在没有它的情况下正常工作.)
First is to have the same template - header, includes, etc. - on the second page, and every page. This ensures that "deep links" and refresh will work regardless of browser support for url hashing (chrome requires this, IE works fine without it.)
当需要状态填充时，它会下降.如果用户在第一页上登录或搜索内容，然后在第二页上向他们显示结果，则指向第二页的深层链接毫无意义，也不应被真正导航到该页面. F5同上；您将在刷新后失去状态.
This falls down when statefullness is required. If the user logs in or searches for something on page one, and you show them a result on page two, then a deep link to page two doesn't make any sense, and shouldn't really be navigated to. Ditto for F5; you'll lose state on a refresh.
这导致解决方案二，如果用户通过链接或刷新进入，则重定向到第一页或主页".无需复制非索引页面的模板，只需更改标题中的位置:
Which leads to solution two, redirect to first or "home" page if the user comes in through a link or refresh. Instead of copying the template for non-index pages, just change the location in the header:
<script>
location.href = "index.html";
</script>
在jQM中的普通ajax页面导航期间，标头中的脚本未运行；仅在直接导航到页面时才运行.
Script in the header is not run during normal ajax page navigation in jQM; this is only run when navigating directly to the page.
此 出现的地方是当您直接导航到诸如mysite/index.html#/pageTwo.html之类的哈希URL时. jQM加载index.html，然后加载pageTwo.html而不处理标题脚本，但是如果那是一个有状态的页面，它将无法正确显示.
Where this falls down is when you navigate directly to a hashed URL like mysite/index.html#/pageTwo.html. jQM loads index.html, then loads pageTwo.html without processing the header script, but if that was a stateful page, it won't display correctly.
您可以完全关闭:
$.mobile.changePage.defaults.changeHash = false;
或者如果页面需要状态，请在pageinit处理程序中检查状态，然后将用户跳回索引页面.
Or put a check for state in the pageinit handler, if the page requires state, and bounce the user back to your index page.
这篇关于jQueryMobile-刷新Ajax加载页面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
