Embed a mobile website into ionic app

Ionic Framework ionic-v3
1

Hi community,

I tryed to embed a mobile website to my ionic app.
As example I use an iFrame to embed the Bootstrap homepage.
<ifram data-tap-disabled="true" src="https://getbootstrap.com/"></iframe>

It seems to look good when I open the app but after navigating to a subpage inside the iFrame the contents width expands and the overflow isn’t readable any more.
Also scrolling is disabled inside the iFrame after loading the subpage.

Is there an easy way to embed a full website wich is fully mobile-friedly to an ionic app?

Thank you
Naderi0

2

Other than the struggle with App Store delivery I would think perhaps ionic is not the right fit for this scenario.
Just plain Cordova perhaps?
You would also need to whitelist the site if you haven’t already.

3

Additionally I think you’d need some css tricks like overflow-x being set to none or something like that. And your mobile site probably needs a viewport tag adding if not already.

Why are you doing this out of curiosity?

4

I’m searching for a simple way to publish my desktop websites into the appstore.

5

Then you don’t need Ionic but plain Cordova.
But be aware that the App Stores don’t really like that at all, so expect your app to get rejected.

3 Likes
6

Your ‘app’ needs to offer something beyond what your web site does or it’ll be rejected.

1 Like
7

I still need a solution for this.
I only want to embed a fully mobile website with a fullscreen iFrame as app.

Any ideas?

I tried ionic and plain cordova - but after clicking a link inside the page it reloads the page and the iframe have a wrong size (feels like 500% width :slight_smile: ).

8

This is not a usecase that will work with Ionic.

1 Like
9

If you insist (and I’m not condoning) with plain Cordova, you could try something like…

<iframe style="width: 100vw; height: 100vh; overflow-y: auto; overflow-x: none;" src="https://whatever.com"></iframe>

(btw this is completely untested, just me throwing ideas)

What’s the website if you’re willing to share?

10

Hello
I embed a mobile website to my ionic app.
but confusion is Apple is allow this type of app or they reject the app
Any Solution to solve this issues ?

11

They MIGHT reject. They’re not fans of that type of injection as it means you could change everything about the app at any time. (and that’s just one reason)

2 Likes
12

So…why does Facebook can do this?

13

Because they’re Facebook