CODEWITHSUNDEEP
androidangularjsantionic-framework
David Prieto
David Prieto

Reputation: 2299

iframe tag doesn't work in latest version of Ionic

I followed this tutorial for the Ionic framework to learn how to build an app: https://thinkster.io/ionic-framework-tutorial/ and it worked great.

Then I started adding features, like a page with an iframe tag in it, and it worked too in the android emulator. But when I went to build my own app from scratch, the iframe works only if you run the app with ionic serve --lab, it doesn't work in the emulator or in a real android device.

The main differences between my app and the example tutorial is that the tutorial is build with Ionic v1.0.0-beta.14 (and I think Apache Ant), and my app with Ionic v1.0.0-rc.4

Is there a way to fix this?

Here is the code, is very simple:

<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>

Upvotes: 3

Views: 4219

Answers (1)

StuffAndThings
StuffAndThings

Reputation: 341

I just started using Ionic and was having the exact same issue--iFrames working in the browser preview but nowhere else. I followed an answer in this SO post and now they're working.

Whitelist functionality had to be added to the app, achieved by running ionic plugin add https://github.com/apache/cordova-plugin-whitelist.git in the project directory.

You may also have to whitelist the external sites you're referencing. For example:

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

Upvotes: 6

Related Questions