Embedded web in mobile application

Hello, I would like to build an application where there are three menu sections. One section is to be a gallery. And I would like to embed a website in it. So I’m still in the application’s application-menu header and a contant webpage shown. Can you do that and if so how?

Could you iframe in your web site?

If is your website, your need to configure the X-FRAME-OPTIONS to allow your website to be in an iframe.

And simply you can do :

<iframe src="https://yourwebsite.com"></iframe>

And put some CSS width: 100%; height: 100%;

1 Like

this way ?

or put it to my website css

I try but it’s not working

i try ionic cordova emulate iOS and i and saw something like that

I believe you need to add the website url to your config.xml file…

Something like…

<allow-navigation href="http://www.website.com/*" />

Or with a fig to security:

<allow-navigation href="*" />

Also, in conflict to what Teazy suggests re CSS I would suggest using vh as that’ll deal with any screen size, so roughly…

<iframe src="https://www.wherever.com" style="height: 30vh; width: 100%;"></iframe>

This will use 30% of the viewport, no matter what size the screen.

3 Likes

Using Safari when your IOS simulator is running.

In the menu “Develop > Name of your Mac > index.html”

You can debug your IOS app (with an normal web inspector) and see the console, to know what is wrong.

Did you remote debug the problem on the device already? Follow these instructions here to debug the problem in Safari dev tools: https://ionic.zone/debug/remote-debug-your-app#ios Look at the console and network tabs for errors.

when i run it ( ionic serve -l ), it turns me on to a preview and immediately redirects to the iframe page
but when i use ionic cordova emulate ios i don’t saw iframe

What does that mean?

Did you allow navigating to the URL as @Judgewest2000 suggested?

Blockquote
when i run it ( ionic serve -l ), it turns me on to a preview and immediately redirects to the iframe page

method to Start local server

Blockquote
but when i use ionic cordova emulate ios i don’t saw iframe

yes, i add

I know ionic serve

What does this mean:

Does the site you are loading having some iframe breaking code? Can you add it to a simple html page with an iframe an open it in the browser or not?

when I adds the code to the normal website everything works fine

Can you share your repo with me or at the very least an example new project where it’s showing thus behaviour?

i can send you all , I’m only testing

By all means - go for it

1 Like

The time I turn on the applications (ionic serve) turns on for a few seconds web with iframe working and then moves to this page from within the iframe.

but when I use (ionic cordova emulate ios) it does not work iframe

Righteo. It’s the link you’ve provided. It’s posting a message to its parent to redirect.

The best you can do with that site is to use the inappbrowser plugin.

wp.pl is only example
i want this site : http://www.tawerna-gdynia.pl/index.php/gallery-album