iFrame loading fail on IOS

Ionic Framework ionic-v3
1

Updates:
problem solved, just a careless mistake.

Hi, I am facing some trouble in using iFrame on IOS.

I tested with both browser and android, they have no problem loading the iFrame at all.
However for IOS, the iframe is always blank.

Do anyone have encounter such problem before, and know any way to solve this?
Or is it a bug?

Way to reproduce:

  1. create a brand new project.

  2. include this in home html:

<iframe class="iframeStyle" [src]="safeURL"></iframe>

  1. load the url with DomSanitizer in home.ts file:
//in constructor, using ionicframework.com as example
urlToLoad : string =  "https://ionicframework.com";
this.safeURL = sanitizer.bypassSecurityTrustResourceUrl(this.urlToLoad);
  1. In config.xml, make sure to include some settings to solve some CORS and navigation issue
<access origin="*" />
<allow-navigation href="*" />
  1. serve, build and run on browser, android and ios.
    Serve and android will successfully display iFrame, but IOS will always be blank.
    Feel free to use Safari Web-Insepctor to inspect the IOS App.
2 Likes
2

What was the mistake?

3

It is long time ago, I don’t really remember the details, but maybe it is something related to network.
Maybe I did not connect to network at that time on my physical device.

4

Yes, for that situation, you can prepare a pop up error message “there’s no internet connection on your device”… I think this can be set up using cordova and typescript.