Appcache + jQuery = No CSS styles without refreshing

StackOverflow https://stackoverflow.com/questions/19656064

質問

I've come across a problem whereby including jQuery (V1.10.2 - Or any version), causes the CSS styles of a second page not to load when accessed via a link on the first page, if all pages in question are cached. To illustrate the problem, I've created a very basic example. Both pages use identical jQuery, jQuery Mobile and jQuery Mobile CSS files, and both are cached by the manifest file (match.manifest), which is referenced by the first page.

The Situation

The first page loads, instructs the browser to cache the first (index.html) and second (index2.html) pages, and then adds a link on the first page that goes to the second. If you click this link, you are taken to the second page, but the CSS styles of the second page are not applied. If you then refresh, they are applied.

In addition, if you load the first page, use the link, and then go back without refreshing, the CSS styles of the second page, are actually applied to the first page!

I have created a simple example, available here: http://cyphergaming.co.uk/dunk/isosec/samples/appcache/

The Code

In case it helps, here is the code used

match.manifest:

CACHE MANIFEST

#update 29/08/13 09:50

CACHE:

# HTML Pages
index.html
index2.html

# CSS
css/jquery.mobile-1.3.2.min.css

# JavaScript
js/jquery-1.10.2.min.js
js/jquery.mobile-1.3.2.min.js

# Images
images/ajax-loader.gif
css/images/ajax-loader.gif

index.html:

<!DOCTYPE html>
<html manifest="match.manifest">
    <head>
        <meta charset="utf-8" />
        <title>Home Page</title>
        <meta name="viewport" content="initial-scale=1, maximum-scale=1"/>
        <link rel="stylesheet" href="css/jquery.mobile-1.3.2.min.css" />
        <script src="js/jquery-1.10.2.min.js"></script>

        <!-- With the below line in this file only, the problem occurs. Without it, it does not. -->
        <script src="js/jquery.mobile-1.3.2.min.js"></script>
    </head>
    <body>
        <div data-role="page" id="homePage">
            <p>First Page.</p>
            <a href="index2.html">Go to second page.</a>
        </div>
    </body>
</html>

index2.html:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Home Page</title>
        <meta name="viewport" content="initial-scale=1, maximum-scale=1"/>
        <link rel="stylesheet" href="css/jquery.mobile-1.3.2.min.css" />
        <script src="js/jquery-1.10.2.min.js"></script>
        <script src="js/jquery.mobile-1.3.2.min.js"></script>
        <style>
            *
            {
                background-color: #ABABAB;
            }
        </style>
    </head>
    <body>
        <div data-role="page" id="homePage">
            <p>Second Page (This should have a grey background, and will if you refresh (Or exlude the jQuery file from the first page).</p>
        </div>
    </body>
</html>

Please feel free to test the link I have provided, or to use the code to test yourself, and please don't hesitate to as any questions.

Thanks for looking, your help is really appreciated!

役に立ちましたか？

解決

Here is a duplicate answer on how to disable the Ajax links when using JQuery Mobile

Example:

<a href="index2.html" data-ajax="false" class="ui-link">Go to second page.</a>

The problem is that the first page only Ajax calls in the second pages HTML, which does not include the second pages styling.

You could also include a global style sheet with a class that will add style to the second page.

EDIT:

data-ajax="false" is the correct property to use instead of rel="external" which is for linking away from your site.

他のヒント

You should be using $.mobile.changePage to navigate between pages.

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top