jQuery Mobile 1.1.0 での非常に紛らわしい動作を説明する、非常に単純な HTML 2 ページのデモがあります。(実際のアプリはもっと複雑ですが、問題を「大幅に」単純化することができました。)
ページ 1 は、ページ 2 にジャンプする単一の href で構成されています。ページ 1 に jQuery Mobile 1.1.0 が含まれていない場合は、リンクをクリックするとページ 2 がエラーなしで表示されます。ただし、ページ 1 に jQuery Mobile 1.1.0 が含まれている場合、ページ 1 のリンクをクリックすると、ページ 1 とページ 2 の HTML を組み合わせたページが表示されます。! つまり、ページ 1 は保持され、ページ 2 はそれに「マージ」されます。通常バージョンと縮小バージョンの両方でこれを試しましたが、同じ結果が得られました。2 つのページは HTML ページと同じくらいシンプルなので、以下のサンプルで簡単に再現できます。これはTomcat 5.5で実行されています（そして、それが重要な場合は、Eclipseから管理および起動されています）。2 つの HTML ファイルと 2 つの jQuery Mobile ファイルはすべて、サーバーのドキュメント ルートのフォルダーに配置されます。(以下のブラウザー出力は、Tomcat を介して実行したものですが、Page1.html ファイルから直接ブラウザーを起動してこれを試してみました。サーバーはまったく関与していません。問題は解決しないため、サーバーが関与しなくても再現できます。 .)
以下は、ページ 1 とページ 2 のファイルの内容と、デスクトップ Firefox ブラウザー (Firebug) で表示される HTML を示しています。
*ページ 1 ソース HTML:
<!doctype html>
<html lang="en">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<!-- Remove jQuery Mobile and Page 2 is displayed properly. -->
<script src="jquery.mobile-1.1.0.min.js" ></script>
</head>
<body >
<a href="Page2.html">Click for Page 2</a>
</body>
</html>
ブラウザ内のページ 1 の HTML の結果:
<html lang="en" class="ui-mobile"><head><base href="http://localhost/MyServer/DemoBadJQM/Page1.html">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="jquery.mobile-1.1.0.min.js"></script>
<title></title></head>
<body class="ui-mobile-viewport ui-overlay-c"><div data-role="page" data-url="/MyServer/DemoBadJQM/Page1.html" tabindex="0" class="ui-page ui-body-c ui-page-active" style="min-height: 521px;">
<a href="Page2.html" class="ui-link">Click for Page 2</a>
</div><div class="ui-loader ui-corner-all ui-body-a ui-loader-default"><span class="ui-icon ui-icon-loading"></span><h1>loading</h1></div></body></html>
ページ 2 ソース HTML:
<!doctype html>
<html lang="en">
<head></head>
<body >
This is from PAGE 2 BODY!!!
</body>
</html>
ブラウザに表示されるページ 2 の HTML:
<html lang="en" class="ui-mobile"><head><base href="http://localhost/MyServer/DemoBadJQM/Page2.html">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<!-- Remove jQuery Mobile and Page 2 is displayed properly. -->
<script src="jquery.mobile-1.1.0.js"></script>
<title></title></head>
<body class="ui-mobile-viewport ui-overlay-c ui-mobile-viewport-transitioning viewport-fade"><div data-role="page" data-url="/MyServer/DemoBadJQM/Page1.html" tabindex="0" class="ui-page ui-body-c ui-page-active fade out" style="min-height: 521px; height: 522px;">
<a href="Page2.html" class="ui-link">Click for Page 2</a>
</div><div class="ui-loader ui-corner-all ui-body-a ui-loader-default"><span class="ui-icon ui-icon-loading"></span><h1>loading</h1></div><div data-role="page" data-url="/OpsServer/DemoBadJQM/Page2.html" data-external-page="true" tabindex="0" class="ui-page ui-body-c">
This is from PAGE 2 BODY!!!
</div></body></html>
jQuery Mobile がページ 1 に含まれていることに注意してください。
コンテンツのない「ページ 2」には、ページ 1 のコンテンツが含まれています。
「ページ 2」には、ページ 1 の href と「loading」要素が含まれています。
「Page 2」には、Page 2 HTML ファイルの単純なテキストが最終的に含まれます。
ページ 1 のリンクをクリックした結果のページは、ページ 1 にページ 2 が追加されたように見えます。ページ 1 から jQuery Mobile を削除すると、問題はなくなります。これは純粋に推測ですが、jQuery Mobile は次のページがフェッチされている間に「読み込み中」メッセージを表示し、これを行う行為により、ブラウザーがページ 1 を「破棄」するのを何らかの形で防ぎ、代わりに着信ページ 2 をマージするようです。前のページ 1 と。
ここで何が起こっているのか誰でも説明できますか?
ありがとう。