iframe 在 Android 上的 Ionic 应用程序中不起作用答案

【问题标题】：iframe not working in Ionic app on Androidiframe 在 Android 上的 Ionic 应用程序中不起作用
【发布时间】：2023-03-29 18:35:02
【问题描述】：

在我的 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 似乎仍然无法正常工作。有什么建议吗？

【问题讨论】：

标签： android html cordova iframe ionic-framework

【解决方案1】：

知道了。只需在链接之前添加 http:// 即可使其正常工作。现在看起来像这样：

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

【讨论】：

【解决方案2】：

如果您使用的是 cordova 5.0 或更高版本，请添加白名单插件。

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

【讨论】：

【解决方案3】：

您需要使用允许您实施白名单策略以在 Cordova >= 4.0 上导航应用程序 Webview 的 Cordova 插件。

在你的 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"/>

【讨论】：

【解决方案4】：

您必须在元数据标签中添加该框架定义

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

然后在您的 config.xml cordova 文件中添加以下元标记：

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

【讨论】：