Ionic应用中的iframe在安卓设备上无法工作

Question

在我的Ionic项目中，我想添加一个Vimeo视频的iframe。当我在本地主机和服务器上测试该应用程序时，这个功能正常工作，但是在Android上似乎无法运行。它显示以下错误：'net::ERR_FILE_NOT_FOUND'。

下面是iframe代码：

<iframe src="//player.vimeo.com/video/VIDEO-ID-HERE" width="WIDTH" height="HEIGHT" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>

我已经添加了白名单插件，它在与其他网站的Ajax请求中正常工作，但是iframe似乎仍然无法工作。有什么建议吗？

- Rogier Wijnands

Answer 1

明白了。只需在链接前加上http://就足以使其正常工作。现在它看起来像这样：

<iframe src="http://player.vimeo.com/video/VIDEO-ID-HERE" width="WIDTH" height="HEIGHT" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>

- Rogier Wijnands

Answer 2

您需要使用一个 Cordova 插件来实现在 Cordova >= 4.0 上导航应用程序 Webview 的白名单策略。

使用以下命令在 Ionic 1 项目中安装此插件：

 ionic plugin add cordova-plugin-whitelist

然后将以下行添加到config.xml文件中，以允许加载外部URL：

<allow-intent href="http://*/*" launch-external="yes"/>
<allow-intent href="https://*/*" launch-external="yes"/>

- Azharullah Shariff

Answer 3

您需要在元数据标签中添加该框架定义。

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

接下来在你的config.xml Cordova文件中添加以下meta标签：

<access origin="*"/>
<allow-navigation href="*"/>

- Bal mukund kumar

Answer 4

如果您正在使用cordova 5.0或更高版本，则需要添加白名单插件。

ionic插件添加https://github.com/apache/cordova-plugin-whitelist.git。

- lickybuay