問題のすべてのページがキャッシュされている場合、jQuery (V1.10.2 - または任意のバージョン) を含めると、最初のページのリンクからアクセスしたときに 2 番目のページの CSS スタイルが読み込まれないという問題が発生しました。問題を説明するために、非常に基本的な例を作成しました。どちらのページも同一の jQuery、jQuery Mobile、および jQuery Mobile CSS ファイルを使用し、どちらも最初のページで参照されるマニフェスト ファイル (match.manifest) によってキャッシュされます。
状況
最初のページがロードされ、ブラウザに最初のページ (index.html) と 2 番目のページ (index2.html) をキャッシュするように指示し、2 番目のページに移動するリンクを最初のページに追加します。このリンクをクリックすると、2 ページ目に移動しますが、2 ページ目の CSS スタイルは適用されません。次に を更新すると、それらが適用されます。
さらに、最初のページを読み込んでリンクを使用し、更新せずに戻ると、2 ページ目の 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>
私が提供したリンクを自由にテストするか、コードを使用して自分でテストしてください。質問があれば遠慮なくしてください。
ご覧いただきありがとうございます。ご協力いただきありがとうございます。