如何在Phonegap安卓应用程序中添加有效的iframe

Question

我有一个Phonegap项目，我有/assets/www/index.html。在索引.html文件中，我有一个 iframe。我预览了应用程序并且 iframe 可以工作，但是当我将应用程序导出为 apk 时，iframe 是空白的。谁能帮助我或告诉我为什么会这样？谢谢

Answer 1

如果您想在 cordova 中使用 iFrames，请确保通过添加 <allow-navigation href="urls which you navigate to" />到您的配置.xml和

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

到您正在使用 iframe 的.html文件。

或者你可以像 Racil 所说的那样将 jQuery onload 用于任何div

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

源jquery

Answer 2

iframe在

移动应用程序和不同平台中可能非常棘手。也许可以用另一种方式完成？您可以使用 jQuery ('selector').load('url') 方法将这些页面直接注入到div 中。下面是一个将推特页面加载到div中的示例：

<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#