Embedded web in mobile application


#1

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?


#2

Could you iframe in your web site?


#3

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%;


#4

this way ?

or put it to my website css


#5

I try but it’s not working

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


#6

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.


#7

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.


#8

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.


#9

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


#10

What does that mean?

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


#11

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


#12

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?


#13

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


#14

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


#15

i can send you all , I’m only testing


#16

By all means - go for it


#17

#18

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


#19

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.


#20

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