Running ionic in iPad inside an iframe

ionic-v1
1

I am using ionic for a mobile development and it will run inside an iFrame in a hybrid app. I am having issue with the keyoboard not working inside textboxes and with scrolling not working in lists due to the fact that ionic is running inside an iFrame. You can reproduce the issue very easy if you go to this urls using safari in an iPad:

https://magic-hippie-codio.io/ionictest/index.html (try to use the iPad keyboard in the text input … not working!!! )

https://magic-hippie-codio.io/ionictest/default.html (This is the same page outside the iframe… it works fine in the iPad !!!)

What is the issue??? I need help. Thanks!

(Extra Info:) Actually I just realized the issue is not just in iPad… I tried my sample in a Chrome browser on my surface table and I got the same behavior… unfortunately it looks like my codio box is not available to everybody so I am afraid you might not see the code unless you are sign in codio (super cool BTW)… Well I will try to create a codepen or similar with the sample… The main issue is that I load the ionic js libraries inside the iframe… (I don’t have control over the outside page) and that seems to be causing the issue… Any advice?

2

please create codepen to look into

3

Hi,
probably you have the same problem that me.
Look my topic and see how I fixed this.

1 Like
4

Wow… Great solution “fabioc” it works indeed… I didn’t have to add the logic you put on your line of code to find the element by ID of the frame to re-focus ( I actually CAN’T do that since the parent container is in another domain and I can’t navigate to parent w/o running in a cross-domain issue)… But, I just did windows.focus() at the beginning of the taphandlefocus event and is seems to have solved the problem for now…

I hope this solution works for other people with similar issues and maybe the ionic group dev’s can consider it for an addition to the code base since it seems to works well without foreseeable side-effects (even for non iFrame scenarios).

Thanks Community!!!