Phonegap 如何重用/包含 HTML 页面？答案

【问题标题】：Phonegap How To Reuse/Include HTML Page?Phonegap 如何重用/包含 HTML 页面？
【发布时间】：2013-05-18 10:05:02
【问题描述】：

我知道在服务器端，这可以通过服务器端脚本轻松完成，但PhoneGap 开发重点是本地副本。那么我如何将HTML 页面重用/包含到另一个 HTML 页面中（没有暴力同源政策）？

【问题讨论】：

你能提供一些代码吗？
你试过 iframe 吗？
@TasosBitsios iframe 不是我想要的，例如，我想在所有页面中使用自定义对话框组件（一个 div 容器），我不想在所有页面中复制 HTML 内容页面，那我该怎么办？
您是否尝试过将对话框组件放在单独的 html 文件中（所有 HTML 标记等），然后通过 jQuery (.load()) 加载它？
@Ekaterina 根据我的研究（对不起，我还没有尝试过，很快就会尝试），jQuery.load() 不允许加载本地文件对吗？

【解决方案1】：

在使用PhoneGap 开发应用程序时，您可以使用许多可用的优秀库。如果您知道jQuery Mobile 库。使用此库，您可以将多个html 页面包含在一个页面中。我是PhoneGap 开发人员。我已经使用这个jQM 库开发了单页应用程序。

他们致力于 Ajax 导航。因此，客户端无需重新加载页面。这将使您的应用程序性能显着提高。您拥有HTML5 localStorage。将所有数据存储在一个 ajax 命中并浏览多个页面。

这是链接：jQuery Mobile

此外，您还可以使用 pager.js 库将多个 HTML 页面加载到一个页面中。非常容易学习。

希望这会对你有所帮助。

【讨论】：

【解决方案2】：

您可以使用 ajax 请求获取它，然后插入到您的页面中。我使用 angular.js，这就是它在幕后所做的......你可能更喜欢 jquery 的加载函数之类的更简单的东西：http://api.jquery.com/load/。

【讨论】：

您好，我已经在 Web 浏览器中尝试过这种方法，如果我们尝试 ajax 检索本地文件，我们将遇到同源策略问题。由于phonegap专注于本地文件，通过使用ajax，我们会遇到同样的问题吗？
如果您在本地计算机上进行开发，则需要运行 http 服务器来提供文件。 OSX自带apache，我用的就是这个，但是配置有点难。您可以使用某种 LAMP 东西，或者只是转到包含您的 html 的文件夹并运行“python -m SimpleHTTPServer”。 SimpleHTTPServer 有时会丢失请求，但它可以工作。

【解决方案3】：

通过 Ajax 加载内容是更好的解决方案，但 JSONP 将是使用 Ajax 加载内容的替代方法。 JSONP 不会导致同源策略问题。

将您的 HTML 代码放在您通过 script-tag 加载和显示的 JS 文件中。例如：

JSONP 文件：

var dialogComponentHTML = "<form>your html code...</form";
$(document).ready(function() {
   $("#your_placeholder").html(dialogComponentHTML);
});

HTML 文件：

<script type="text/javascript" src="dialog.jsonp">
<div id="your_placeholder"></div>

【讨论】：