JqueryMobile - refresh ajax loaded page

问题

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>

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>

The second:

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

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?

Thanks in advance

回答1:

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.

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.)

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>

Script in the header is not run during normal ajax page navigation in jQM; this is only run when navigating directly to the page.

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.

You can turn off hasing altogether:

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

Or put a check for state in the pageinit handler, if the page requires state, and bounce the user back to your index page.

来源：https://stackoverflow.com/questions/11189052/jquerymobile-refresh-ajax-loaded-page

标签

jquery

ajax

jquery-mobile