Question

我正在HTML5中构建一个离线平板电脑/手机应用程序，以便在没有手机信号塔的领域远程收集数据。它使用脱机应用程序缓存清单将页面保存到浏览器中。我试图让它在Safari和Android中运行。

目前我的网站有多个单独的网页（index.html，load.html和sync.html）。我希望能够在每个页面加载后加载每个页面并运行不同的javascript。

最初我有一个主索引页面（作为应用程序的引导程序）并使用jQuery的.load（）函数将菜单按钮加载到主显示div中的不同页面文件（只有html的片段）被点击了。这与iPhone相得益彰。然而，当在Android上尝试它并且该网站已经被缓存并且设备处于飞行模式以便它无法连接到服务器时，由于某种原因，页面将无声地从外部页面加载到HTML中，因此我会得到一个空白的屏幕。当从缓存中加载页面时，我将其缩小到jQuery的.load（）函数在Android中失败。

然后，我尝试将各个页面分开，并在每个页面上镜像所有HTML，JavaScript，CSS包含和标题代码（效率不高）。因此，每个页面可以独立运行。当按照简单的href链接加载其他页面时，这在Android和iPhone的Web浏览器中正常工作。然而当我进入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函数来显示每个页面。 E.g。

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

然后还将这些函数调用添加到按钮/链接上的onclick处理程序以打开每个页面。 E.g。

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

现在你已经有了一个可以在iPhone / Android中加载所有页面的工作导航系统，甚至可以在iPhone'app'模式下加载Safari。

在iOS和全屏应用模式下使用离线应用程序缓存，它会在Safari中打开其他页面而不是应用程序

1 个答案: