Question

我有一个phonegap项目，我有/assets/www/index.html。在index.html文件中，我有一个iframe。我预览应用程序和iframe工作，但当我将应用程序导出为apk时，iframe为空。任何人都可以帮助我或告诉我为什么会这样吗？感谢

Answer 1

如果您想在cordova中使用iFrame，请确保通过添加白名单列出域名 <allow-navigation href="urls which you navigate to" />到你的config.xml 和

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

到您使用iframe的.html文件。

或者你可以像Racil所说的那样使用jQuery onload

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

来源 jquery

Answer 2

iframe在移动应用和不同平台上可能非常棘手。也许它可以用另一种方式完成？您可以使用jQuery ('selector').load('url')方法将这些页面直接注入div。这是一个将twitter页面加载到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版本＆gt; = 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#

如何在phonegap android应用程序中添加工作iframe？

2 个答案: