如何在PhoneGap Android应用程序中添加一个能够工作的iframe？

Question

我有一个phonegap项目，里面有/assets/www/index.html文件。在index.html文件中，我有一个iframe。当我预览应用程序时，iframe可以正常显示，但是当我导出apk应用时，iframe却变成了空白。有谁能帮助我或告诉我为什么会发生这种情况吗？谢谢。

- Toufic Batache

---

你在使用 iframe 做什么？你真的需要它吗？也许可以用另一种方式完成。 iframe 在移动应用和不同平台上可能很棘手。 - Racil Hilan

好的，我想使用 iframe，因为在应用程序中将有选项卡，一个是博客，一个是网站，还有一个是推文。在每个选项卡中，我将添加博客、网站和推文的 iframe！ - Toufic Batache

您可以使用jQuery的('selector').load('url')方法直接将这些页面注入到一个div中。 - Racil Hilan

我会看一下它是否可行。谢谢。 - Toufic Batache

你能否在 jsfiddle 上给我一个小代码？我无法弄清楚如何让它工作。 - Toufic Batache

Answer 1

如果您想在Cordova中使用iFrames，请确保通过向您的config.xml添加<allow-navigation href="您导航到的网址" />来白名单域。

<meta http-equiv="Content-Security-Policy" content="default-src 'self'; frame-src 'self' https://iframe url">

将以下代码添加到使用 iframe 的 .html 文件中。

或者您可以像 Racil 所说的那样，为任何 div 使用 jQuery onload。

<div id="divid"></div>
<script>
$( "#divid" ).load( "url to load" );
</script> 

Source jquery

- Surya Krishy

---

不，这是不可能的。不要查看www目录，它将在项目的主目录中创建。 - Surya Krishy

我到处搜索了一遍... 我可以给你发送一个项目的压缩包。 - Toufic Batache

创建一个名为xml的文件夹，然后在其中创建config.xml文件。 - Surya Krishy

我应该不添加 https://github.com/phonegap/phonegap-sample-hybrid-android/blob/master/AndroidManifest.xml 吗？ - Toufic Batache

好的，现在错误已经修复了，但是应用程序在启动时崩溃。 - Toufic Batache

Answer 2

iframe在移动应用程序和不同平台上可能会非常棘手。也许可以用另一种方式实现？您可以使用jQuery ('selector').load('url') 方法直接将这些页面注入到一个

中。以下是一个将Twitter页面加载到一个

中的示例：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="MyLittleBrowser" style="width: 200px; height: 200px; border: 1px solid #000; overflow: scroll;"></div>
<script>
  $("#MyLittleBrowser").load("https://crossorigin.me/https://www.twitter.com/");
</script>

请确保将要加载的所有网站都加入白名单。对于新的PhoneGap版本（>= 5），您需要使用白名单插件，该插件具有用于此目的的新语法。如果您想使用旧语法，则可以使用旧版插件。例如，要运行上面的代码，您需要将以下内容添加到您的config.xml中：

<plugin name="cordova-plugin-legacy-whitelist" spec="1.1.1" />
<access origin="https://crossorigin.me" />

注意：我在示例中使用了https://crossorigin.me服务，因为否则Twitter会给我一个CORS错误，因为它是与SO不同的域，并且不允许CORS。在您的项目中，只要您加载的页面允许CORS访问，就不需要使用此服务。如果该页面是您自己的，请记得通过将此标题添加到您的页面来允许CORS：

header("Access-Control-Allow-Origin: *"); //PHP
Response.AddHeader("Access-Control-Allow-Origin", "*"); //C#

- Racil Hilan

---

它在PhoneGap中不起作用，但在这里，在stackoverflow上，它完美地工作！ - Toufic Batache

当然可以在PhoneGap中使用它。我在我的项目中随处使用它。请确保将您正在加载的所有网站列入白名单。请查看我的更新答案以了解如何操作。 - Racil Hilan

你能给我一个最新的PhoneGap演示项目吗？我没有config.xml，你觉得我可以从Github上获取一个演示项目吗？https://github.com/phonegap/phonegap-sample-hybrid-android 这个好吗？我的意思是，我可以下载它并更改应用程序名称... - Toufic Batache

使用我提供的链接作为模板开始。当您准备好构建时，请压缩您的www文件夹并将其上传到build.phonegap.com。 - Racil Hilan

我没有特定的页眉和页脚高度。我从materializecss.com获取了模板，这个模板是起始模板...我只是在页脚中删除了公司简介... - Toufic Batache