0

セルタワーがないフィールドでリモートでデータを収集するために、HTML5でオフラインのタブレット/電話アプリを構築しています。オフラインアプリケーションキャッシュマニフェストを使用して、ページをブラウザに保存します。SafariとAndroidで動作させようとしています。

現在、私のサイトには複数の個別のWebページ（index.html、load.html、sync.html）があります。各ページを読み込んで、各ページが読み込まれたときに異なるJavaScriptを実行できるようにしたい。

もともと私はメインインデックスページ（アプリケーションのブートストラップとして機能）を持っていて、メニューボタンがクリックされたときにjQueryの.load（）関数を使用してさまざまなページファイル（htmlのスニペットのみ）をメインディスプレイdivにロードしていました。これはiPhoneでかなりうまくいきました。ただし、Androidで試してみて、サイトがすでにキャッシュされていて、デバイスが機内モードになっていてサーバーに接続できない場合、何らかの理由でページが外部ページからHTMLにサイレントに読み込まれないため、空白の画面が表示されます。キャッシュからページをロードするときにAndroidで失敗するjQueryの.load（）関数に絞り込みました。

そこで、個々のページを分離し、すべてのHTML、JavaScript、CSSインクルード、およびヘッダーコードを各ページにミラーリングしてみました（あまり効率的ではありません）。したがって、各ページは単独でスタンドアロンで実行できます。これは、AndroidとiPhoneのWebブラウザーで、単純なhrefリンクをたどって他のページをロードするときに問題なく機能しました。ただし、iPhoneでアプリモードに入ると（つまり、Webページをホーム画面に保存して実際のアプリアイコンとして表示され、そこから実行すると、ステータスバーとは別にほぼ全画面表示されます）、メニューアイコンをクリックします。たとえば、sync.htmlをロードすると、フルスクリーンの「アプリ」モードのままではなく、Safariでページが開きます。

iPhoneのフルスクリーン「アプリ」モードでキャッシュする必要がある個別のWebページを開く方法はありますか？画面サイズが小さいので、他のページにSafariが読み込まれるのは望ましくありません。

私が考えることができる他の唯一の方法は、メインのインデックスページのdivにすべてのhtmlスニペットを非表示にし、クリックされたメニューボタンに応じてdivを表示および非表示にすることです。これはよりクリーンで高速に見えるかもしれませんが、それを行うためのより良い方法があるかどうか疑問に思っていますか？

4

1 に答える 1

0

今のところ、私が思いつくことができる最もクリーンな解決策はこれでした：

HTML：

<section id="pageContent">
   <div id="homePage" class="hidden">
       <?php include_once 'home.html'; ?>
   </div>

   <div id="loadPage" class="hidden">
       <?php include_once 'load.html'; ?>
   </div>

   <div id="syncPage" class="hidden">
       <?php include_once 'sync.html'; ?>
   </div>
</section>

CSS：

.hidden {
    display: none;
}

これにより、コンテンツページを別々のファイルに保存できます。また、これらのファイルのhtmlはすべて、ページの読み込み時にインデックスページに含まれているため、すべてのhtmlもキャッシュされます。さまざまなページを非表示にして表示するだけです。

次に、いくつかの単純なjQueryを使用して各ページを表示および非表示にし、いくつかの単純なJavaScript関数を設定して個々のページを表示しました。例えば

function showSyncPage()
{
    $('#pageContent').children().hide();   // Hide all the other divs (other pages)
    $('#syncPage').show();    // Show the sync page
}

次に、これらの関数呼び出しをボタン/リンクのonclickハンドラーに追加して、各ページを開きます。例えば

<a class="button" onclick="showSyncPage()">Sync</a>

これで、SafariをロードせずにiPhone / Androidで、さらにはiPhoneの「アプリ」モードでもすべてのページをロードするナビゲーションシステムが機能するようになりました。

于 2011-12-01T04:31:59.060 に答える