Ionic - How to keep app header & footer visible and show InAppBrowser in the ion-content?

Ionic Framework ionic-v3
1

Hello,

I basically have a requirement to load a url inside an Ionic2 app where I have to keep the Ion-header and Footer visible and display the url inside the ….

I tried InAppBrowser, but it overlays the app.
I tried the iframe, but I get the following
Refused to display 'http://mysodexo.monforte.it/mense/Mensa-Toyota/mensa' in a frame because it set 'X-Frame-Options' to 'SAMEORIGIN'.

Any other suggestions I can try ? Was anyone able to style the InAppBrowser in a way to make it resizable with CSS so that it fits within ion-content?

Thank you !

2

I am looking for the same solution. I want a website loading within my page, keeping the header. Any code to share so far?

3

I have this in one of my pages:

<iframe id="iframe1" [src]="link" src="" height="100%" width="100%" frameborder="0" ></iframe>
4

were you able to successfully achieve the desired result with the code above? looking for the same result but to no avail

5

Yes. I was able to load a website within the app while keeping the ionic look and feel. Just make sure that in your config.xml you have a “allow-navigation” tag to allow your app to navigate to that url.
<allow-navigation href="http://*/*"/>

6

Using iframe work but the problem came when the device is rotated, the content of the iframe will reload. I also facing the same issue and looking for a better option.

1 Like