0

我遇到了一个问题,其中包括 jQuery(V1.10.2 - 或任何版本),如果所有相关页面都被缓存,则在通过第一页上的链接访问时不会加载第二个页面的 CSS 样式。为了说明这个问题,我创建了一个非常基本的示例。两个页面都使用相同的 jQuery、jQuery Mobile 和 jQuery Mobile CSS 文件,并且都由第一页引用的清单文件 (match.manifest) 缓存。

情况

第一个页面加载,指示浏览器缓存第一个(index.html)和第二个(index2.html)页面,然后在第一个页面上添加一个链接到第二个页面。如果单击此链接,您将转到第二页,但不会应用第二页的 CSS 样式。如果您随后refresh,它们将被应用。

另外,如果你加载第一页,使用链接,然后不刷新就返回,第二页的CSS样式,实际上是应用到第一页的!

我创建了一个简单的示例,可在此处获得:http ://cyphergaming.co.uk/dunk/isosec/samples/appcache/

编码

如果有帮助,这里是使用的代码

匹配清单:

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

索引.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>

请随时测试我提供的链接,或使用代码测试自己,如有任何问题,请不要犹豫。

感谢您的关注,非常感谢您的帮助!

4

2 回答 2

1

这是关于在使用 JQuery Mobile 时如何禁用 Ajax 链接的重复答案

例子:

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

问题是第一页只有 Ajax 在第二页 HTML 中调用,其中不包括第二页样式。

您还可以包含一个全局样式表,其中包含一个将样式添加到第二页的类。

编辑:

data-ajax="false"是要使用的正确属性,而不是rel="external"用于链接远离您的站点的属性。

于 2013-10-29T11:21:28.003 回答
0

您应该使用 $.mobile.changePage 在页面之间导航。

于 2013-11-05T20:14:06.720 回答