0

我正在用 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。这可能看起来更干净，更快，但只是想知道是否有更好的方法来做到这一点？

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>

现在你已经有了一个工作导航系统，它可以加载 iPhone/Android 中的所有页面，甚至可以在 iPhone 的“应用”模式下加载，而无需加载 Safari。

于 2011-12-01T04:31:59.060 回答