How to Use iframe to embed external web pages in Ionic?

Ionic Framework Ionic Angular
1

Hi,

I am tying embed external webpage in iframe, But this is not working. anyone can help me on this. I am using Ionic 5. I am writing this code in tab1.page.html. I was just create anew application with tabs template.

<div id="container">
  <strong>{{ name }}</strong>
  <iframe class='webPage' src="https://www.google.com/" style="width:100%; height:100%;"></iframe>
</div>

after execution in App this error isshowing. “Web Page is not available”.

webpage
webpage540×1200 25.9 KB

Kindly help me on this.

Kind Regards,

2
3

You also need to be aware of the X-Frame-Options header. If the site you are trying to load in an iframe has it set to SAMEORIGIN you are out of luck. It looks like https://shop.jaipurandco.com does have it set to SAMEORIGIN.

1 Like
4

I don’t know if this is still the case, but I recall @mhartington frequently exhorting people not to use iframes at all, instead recommending InAppBrowser.