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并且遇到了完全相同的问题 - iFrames在浏览器预览中工作但其他地方都没有.我在这篇SO帖子中找到了答案,现在他们正在工作.

必须将白名单功能添加到应用程序,通过在项目目录中运行来实现.ionic plugin add https://github.com/apache/cordova-plugin-whitelist.git

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

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