android - iframe 标签在最新版本的 Ionic 中不起作用

Question

我按照 Ionic 框架的本教程学习如何构建应用程序:https://thinkster.io/ionic-framework-tutorial/ 效果很好。

然后我开始添加功能，比如一个带有 iframe 标签的页面，它在 android 模拟器中也能正常工作。但是当我从头开始构建自己的应用程序时，iframe 仅在您使用 ionic serve --lab 运行应用程序时才有效，它在模拟器或真正的 android 设备中不起作用。

我的应用程序和示例教程之间的主要区别在于教程是使用 Ionic v1.0.0-beta.14(我认为是 Apache Ant)构建的，而我的应用程序是使用 Ionic v1.0.0-rc.4

有办法解决这个问题吗？

代码如下，非常简单:

<ion-view view-title="Detalles de mensaje" class="detallesWV-page">
  <ion-nav-buttons side="right">
   <button class="button button-icon icon ion-navicon-round" ng-click="openPopover($event)">
   </button>
  </ion-nav-buttons>

  <ion-content scroll="false">

      <iframe src="http://www.cnn.com/" height="400px" width="350px"></iframe>

    <div class="row">
      <div class="col">
        <button class="button button-assertive" ng-class="" ng-click="openPage()">
          {{ 'NO SE MUESTRA CONTENIDO' }}
        </button>
      </div>
    </div>

    </ion-content>
</ion-view>

Answer 1

我刚开始使用 Ionic，遇到了完全相同的问题——iFrame 在浏览器预览中工作，但在其他任何地方都无法工作。我遵循了 this SO post 中的答案现在他们开始工作了。

白名单功能必须添加到应用程序，通过运行 ionic plugin add <a href="https://github.com/apache/cordova-plugin-whitelist.git" rel="noreferrer noopener nofollow">https://github.com/apache/cordova-plugin-whitelist.git</a> 实现在项目目录中。

您可能还必须将您引用的外部网站列入白名单。例如:

.config(function ($sceDelegateProvider) {
    $sceDelegateProvider.resourceUrlWhitelist(['self', 'http://www.cnn.com/']);
});