What is the Ionic way to use fullscreen iframe?

ionic-v1
1

Hi guys, newbie here and it’s my first time to use Ionic framework and I love it! Everything worked smoothly in developing my side-menu app to building it for Android. When I build it for iOS though, everything worked great except for my two fullscreen iframes.

The first iframe loads this page: http://kindlansing.com/kind-leafly-menu/
When I run it on my iPhone, it initially shows just the header title and then it disappears and just shows a blank white page.

The second one loads this page: http://kindlansing.com/blog/
This one loads the page but I can’t scroll over it.

I have these settings:
config.xml
<access origin="*"/> <allow-navigation href="*"/>

first and second iframe pages are basically the same

<ion-view title="{{menuSetting.title}}" id="menu-page-id" ng-controller="menuCtrl">
<ion-content class="iframe-content has-header" padding="false">
<iframe ng-show="menuSetting" src="{{menuSetting.iframe_src | trusted}}" width="100%" height="100%"></iframe>
</ion-content>
</ion-view>

my.css

.iframe-content > .scroll { height: 100%; } .iframe-content > .scroll > iframe { min-height: 100%; }

filter

.filter('trusted', ['$sce', function ($sce) { return function(url) { return $sce.trustAsResourceUrl(url); }; }]);

xcode

allow arbitrary loads: YES

I apologize for this long post, but I’m so lost on how to solve this problem. Please help.

2

Don’t use iframe for external links! Try using ngCordova inappbrowser plugin. That’s awesome :wink:

3

Hi @vahidvdn, thank you so much for the help! :grinning: I was able to open it in the InAppBrowser. I want it to open on a page though so the side menu button can still be seen. Is there a way to do it?

1 Like
5

I want the same thing, did you solve it ?