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在浏览器预览中工作，但其他地方都没有。我按照this SO post中的回答，现在他们正在工作。

必须将白名单功能添加到应用程序中，方法是在项目目录中运行ionic plugin add https://github.com/apache/cordova-plugin-whitelist.git。

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

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

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

1 个答案: