在iOS和全屏應用模式下使用脫機應用程序緩存，它將在Safari中打開其他頁面，而不是在應用程序中

Question

我正在使用HTML5構建離線的平板電腦/電話應用程序，以在沒有手機信號塔的現場遠程收集數據。 它使用脫機應用程序緩存清單將頁面保存到瀏覽器中。 我正在嘗試使其在Safari和Android中運行。

當前，我的網站有多個單獨的網頁（index.html，load.html和sync.html）。 我希望能夠加載每個頁面並在每個頁面加載后運行不同的javascript。

最初，我有一個主索引頁面（充當應用程序的引導程序），並使用jQuery的.load（）函數將不同的頁面文件（僅html片段）加載到單擊菜單按鈕時的主顯示div中。 這在iPhone上效果很好。 但是，當在Android上進行嘗試並且站點已經被緩存並且設備處於飛行模式，因此它無法連接到服務器時，由於某種原因，該頁面將無法以靜默方式從外部頁面加載HTML，因此我出現黑屏。 我將其范圍縮小為從緩存加載頁面時jQuery的.load（）函數在Android中失敗。

因此，然后我嘗試將各個頁面分開，並在每個頁面上鏡像所有HTML，JavaScript，CSS包含和標頭代碼（效率不高）。 因此，每個頁面都可以獨立運行。 遵循簡單的href鏈接加載其他頁面時，在Android和iPhone中的網絡瀏覽器中這可以正常工作。 但是，當我在iPhone上進入應用程序模式時（即，將網頁保存到主屏幕，使其顯示為實際的應用程序圖標，然后從那里運行它，它與狀態欄幾乎全屏顯示），然后單擊菜單圖標例如，加載sync.html會在Safari中打開頁面，而不是停留在全屏“應用”模式下。

有沒有辦法打開應在iPhone的全屏“應用”模式下緩存的單獨網頁？ 我不希望其他頁面加載Safari，因為屏幕尺寸較小。

我能想到的唯一其他方法是將所有html代碼段隱藏在主索引頁面上的div中，然后根據單擊哪個菜單按鈕來顯示和隱藏div。 這看起來更干凈，更快，但只是想知道是否有更好的方法？

Answer 1

現在，我能想到的最干凈的解決方案是：

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>

現在，您已經有了一個有效的導航系統，該系統可以在iPhone / Android甚至iPhone“應用”模式下加載所有頁面，而無需加載Safari。