【发布时间】：2013-11-08 11:32:14
【问题描述】：
我遇到了一个问题，其中包括 jQuery（V1.10.2 - 或任何版本），如果所有有问题的页面都是缓存。为了说明这个问题，我创建了一个非常基本的示例。两个页面都使用相同的 jQuery、jQuery Mobile 和 jQuery Mobile CSS 文件，并且都被第一页引用的清单文件 (match.manifest) 缓存。
情况
加载第一页，指示浏览器缓存第一页 (index.html) 和第二页 (index2.html)，然后在第一页上添加指向第二页的链接。如果您单击此链接，您将转到第二页，但第二页的 CSS 样式未应用。如果您随后刷新，它们被应用。
另外，如果你加载第一页，使用链接，然后不刷新就返回，第二页的CSS样式，实际上是应用到第一页！
我创建了一个简单的示例，可在此处找到：http://cyphergaming.co.uk/dunk/isosec/samples/appcache/
守则
如果有帮助，这里是使用的代码
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>
请随意测试我提供的链接，或使用代码测试自己，如有任何问题，请不要犹豫。
感谢您的关注，非常感谢您的帮助！
【问题讨论】：
-
当您单击指向第二页的链接时，第一页只是将第二页附加到自身。您必须更改 DIv id 吗？它们都设置为
homePage -
在页面 div 中添加样式或任何自定义 js。 jQM 通过 ajax 加载页面，因此它忽略
<head>并使用data-role=page获取第一个 div。当您刷新页面时，它会正常加载它以便应用样式。 -
@JamieRead 我已经更改了第二页 ID，但这似乎没有效果，你所说的附加第二页可能至少会导致问题，但是有没有办法停止发生这种情况，而是让它像普通的 HTML 链接一样运行？
-
@Omar 不幸的是，这不是一个真正的选项，这实际上是用于跨多个文件、多个页面和多个子目录的应用程序，因此所有页面都必须有自己的文件！
-
每个页面都有自己的css？自定义js？如果是这样，您要么将它们包含在
data-role=pagediv 中，要么关闭 ajax 以在页面之间导航。
标签： jquery css jquery-mobile html5-appcache