# iFrame loading fail on IOS

**URL:** <https://forum.ionicframework.com/t/iframe-loading-fail-on-ios/116425>\
**Category:** ionic-v3\
**Created:** [December 26, 2017, 9:48am UTC](https://forum.ionicframework.com/t/iframe-loading-fail-on-ios/116425 "2017-12-26T09:48:51Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![EmericoWeiKang](https://avatars.discourse-cdn.com/v4/letter/e/49beb7/32.png) [@EmericoWeiKang](https://forum.ionicframework.com/u/EmericoWeiKang)\
**Post date:** [December 26, 2017, 9:48am UTC](https://forum.ionicframework.com/t/iframe-loading-fail-on-ios/116425/1 "2017-12-26T09:48:51Z")

</div>

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:

```auto
//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

```auto
<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.

---

<div class="post-metadata">

**Author:** ![josekibo](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/josekibo/32/117409_2.png) [@josekibo](https://forum.ionicframework.com/u/josekibo)\
**Post date:** [February 21, 2018, 1:19pm UTC](https://forum.ionicframework.com/t/iframe-loading-fail-on-ios/116425/2 "2018-02-21T13:19:27Z")

</div>

What was the mistake?

---

<div class="post-metadata">

**Author:** ![EmericoWeiKang](https://avatars.discourse-cdn.com/v4/letter/e/49beb7/32.png) [@EmericoWeiKang](https://forum.ionicframework.com/u/EmericoWeiKang)\
**Post date:** [February 22, 2018, 2:33am UTC](https://forum.ionicframework.com/t/iframe-loading-fail-on-ios/116425/3 "2018-02-22T02:33:00Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![jamesharvey](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/jamesharvey/32/116080_2.png) [@jamesharvey](https://forum.ionicframework.com/u/jamesharvey)\
**Post date:** [February 22, 2018, 3:01am UTC](https://forum.ionicframework.com/t/iframe-loading-fail-on-ios/116425/4 "2018-02-22T03:01:42Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![mhartington](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/mhartington/32/137757_2.png) [@mhartington](https://forum.ionicframework.com/u/mhartington)\
**Post date:** [July 19, 2021, 9:57pm UTC](https://forum.ionicframework.com/t/iframe-loading-fail-on-ios/116425/5 "2021-07-19T21:57:39Z")

</div>