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 在浏览器预览中工作，但在其他地方不工作。我在中关注了一个答案，现在他们正在工作。

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

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

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

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

iframe tag doesn't work in latest version of Ionic

ant

android

angularjs

ionic-framework

ionic