如何在脱机Web应用程序中本地访问HTML文件

Question

我正在构建一个基于移动网络的游戏。我想使用单页设计，我希望它能够脱机运行。我想设计和存储我将用作文件夹中的文件的不同HTML页面，并在我需要时将它们加载到我的div中。问题是我找不到使用Web技术加载本地文件的方法。

正常的方法是在服务器上托管文件，并通过AJAX等获取，但我想绕过获取时间并允许应用程序脱机运行。

现在我正在做的是创建我的html页面，将它们存储为JS文件中的字符串并使用它，但我希望有更好的解决方案。

理想情况下，我想要像$(".mydiv").load("../html/login.html")这样的东西。但是，由于加载使用AJAX，我认为这不会起作用。

编辑：我打算使用手机间隙构建来打包我的应用程序。

Answer 1

出于安全原因，Web应用程序无权访问本地文件。听起来你最好根据自己的要求制作移动应用程序。 Web应用程序无法在本地100％运行，因为它需要Web服务器入口点。有一些方法可以使用本地存储或cookie等在本地存储数据，但网站无法脱机运行。

Answer 2

将所有数据保存在单个网页中，作为不可见元素，然后根据需要显示它们。调用“单页设计”是出于某种原因 - 您只能获得一页。但是该页面可以任意大，您可以动态修改它，并且您可以显示和隐藏适合您的部分。您也可以使用clientside templating engines中的任何一个来模拟.load()，就像从服务器加载它一样。

编辑：您正在构建PhoneGap应用程序完全改变了事实（应该从一开始就这么说）：PhoneGap就像服务器一样，允许您构建一个多页面应用。因此，所有内容（包括.load() should work as you expect。您不能在没有Web服务器的情况下测试您的应用程序，因为只需从您的硬盘打开文件（即使用{{ 1}} protocol）不允许它，所以对于测试，你必须转移到Web服务器。但是，你的问题中的“单页设计”有点误导。

Answer 3

我不知道我的建议是否相关，但如果您使用phonegap，则可以使用标准网络技术构建独立的移动应用程序。也许你可以看一下......

Answer 4

有一种简单的方法可以做到这一点并且很难......你正走在艰难的道路上......

我构建了一个单页html5移动应用程序，它通过javascript控制信用卡读卡器。读卡器确实需要互联网连接。其他部分很容易在离线模式下工作。

这样做的简单方法是在良好的移动框架的帮助下。特别是您需要一个框架，使其易于脱机工作。

由于有许多框架，请选择具有脱机组件的框架。我使用的框架是Dhtmlx Touch http://dhtmlx.com/touch。选择一个框架，从json字符串创建页面100％ - 不是div。然后很容易，您可以将页面存储在浏览器的本地存储中作为json对象。

所以你有1个html5页面...一个很好的javascript框架......和本地存储。

Dhtmlx Touch在框架中内置了一个离线组件：http://docs.dhtmlx.com/touch/doku.php?id=how_to_create_offline_apps

使用正确的工具，这一切都非常简单....它可以与PhoneGap或Native Webview一起使用。

Answer 5

http://sammyjs.org/是我开始使用的库，可以完美地处理这个问题。它允许您分离HTML代码并在需要时包含它。