Question

在我正在处理的Cordova应用中，有一个iframe。问题是，在测试应用程序（模拟器和设备）时，iframe是空白的。在Android上，iframe工作正常。

iframe是在Angular指令中动态加载的。

在指令链接函数中，以下代码用于加载iframe并将其附加到指令的元素：

var iframe = angular.element('<iframe class="widget" width="' + widgetWidth + '" height="' + widgetHeight + '"></iframe>');
iframe.attr('src', url);
element.append(iframe);

我也尝试过以下几行：

var iframe = document.createElement('iframe');
iframe.src = url;

这导致类似以下内容（使用Safari Web检查器）：

<iframe class="widget" width="384" height="505" src="http://hostname/correct/uri"></iframe>

在我的index.html文件中，我有以下设置：

<meta http-equiv="Content-Security-Policy" content="script-src * 'unsafe-eval'; connect-src * 'unsafe-eval'; object-src 'self'; style-src * 'unsafe-inline';">

我的cordova config.xml中还有以下几行：

<access origin="*" subdomains="true" />
<allow-intent href="http://*/*" />
<allow-intent href="https://*/*" />

Safari Web Inspector中也没有错误或警告。

所以我的问题是，是否有一些技巧让iFrames在我缺少的Cordova iOS应用程序中工作。或者我当前的配置/代码出了什么问题？

我正在使用angularjs 1.5.3并且有jquery 2.2.1（在angularjs之前加载）以防万一。

Answer 1

问题是allow-navigation标签。所以要解决它我只需要将<allow-navigation href="*" />标记放入项目的config.xml文件中。

当模拟器运行时，我通过xcode中的输出框找到了解决方案。有一条消息包含有问题的iframe网址以及“内部导航被拒绝”的内容。

Answer 2

您是否尝试在Content-Security-Policy元标记中设置child-src和/或frame-ancestors？这些可能需要设置为*或更严格的内容，例如您正在使用的iframe源URL。

有关content-security-policy.com

的相关信息

基于您的内容安全政策的示例：

<uses-sdk
    xmlns:tools="http://schemas.android.com/tools"
    tools:overrideLibrary="android.support.v14.preference" />

Cordova iOS空白iframe

2 个答案: