Iframe tag not working in latest Ionic
I followed this tutorial for Ionic framework to learn how to create an app: https://thinkster.io/ionic-framework-tutorial/ and it worked great.
Then I started adding features like iframe tag page and it worked in android emulator too. But when I started building my own app from scratch the iframe only works if you run the app with ionic serve --lab it doesn't work in emulator or real android device.
The main differences between my app and the tutorial example are that the tutorial is built with Ionic v1.0.0-beta.14 (and I think Apache Ant) and my app is built with Ionic v1.0.0-rc.4
Is there a way to fix this?
Here's the code, 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>
source to share
I just started using Ionic and had the same problem - iFrames working in browser preview, but nowhere else. I followed the answer in this SO post and they work now.
Whitelisting functionality should be added to the application, achieved by running in the project directory.ionic plugin add https://github.com/apache/cordova-plugin-whitelist.git
You may also want to whitelist the external sites you link to. For example:
.config(function ($sceDelegateProvider) {
$sceDelegateProvider.resourceUrlWhitelist(['self', 'http://www.cnn.com/']);
});
source to share