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

Question

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

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

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

理想情况下，我想要类似$(".mydiv").load("../html/login.html") 。 但是，由于负载使用AJAX，所以我认为这不起作用。

编辑：我正计划使用手机差距构建来打包我的应用程序。

Answer 1

出于安全原因，Web应用程序无权访问本地文件。 听起来，根据您的需求制作移动应用可能会更好。 Web应用程序需要Web服务器入口点，因此无法100％在本地运行。 有多种方法可以使用本地存储或Cookie等在本地存储数据，但网站不能离线运行。

Answer 2

将所有数据保存在单个网页中，作为不可见元素，然后根据需要显示。 之所以称其为“单页设计”，是因为您只有一个页面。 但是该页面可以任意大，您可以随时对其进行修改，还可以根据需要显示和隐藏零件。 您还可以使用任何客户端模板引擎来模拟.load()就像从服务器上加载它一样。

编辑 ：您正在构建PhoneGap应用程序的事实完全改变了（请从一开始就应该这么说）：PhoneGap就像服务器一样，允许您构建多页应用程序。 因此，所有内容（包括.load() 都应按预期工作 。如果没有网络服务器，则无法测试应用程序，因为仅从硬盘上打开文件（即，使用file:协议）是不允许的，因此要进行测试，您将不得不移至Web服务器，但是，您的问题中的“单页设计”有些令人误解。

Answer 3

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

Answer 4

有一种简单的方法可以做到这一点，而有困难的方法...您走的是艰难的道路...

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

简便的方法是借助良好的移动框架。 特别是，您需要一个易于脱机工作的框架。

由于框架很多，请选择一个具有脱机组件的框架。 我使用的框架是Dhtmlx Touch http://dhtmlx.com/touch 。 选择一个框架，该框架可通过json字符串（NOT divs）100％创建页面。 然后，这很容易，您可以将页面作为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代码，并在需要时将其包括在内。