How can I open an iframe in a phonegap/cordova app running on IOS?

Question

I have a webapp that I\'m using with PhoneGap/Cordova to install in iOS and Android. At one point in the app I have an iframe that loads content from a second server.

Answer 1

Why dont you use the InAppBrowser? http://docs.phonegap.com/en/2.3.0/cordova_inappbrowser_inappbrowser.md.html . It is going to be tricky to use iframes which works both in Android as well as in iOS

Answer 2

After adding an InAppBrowser in place of the iframe I was using before, I eventually tried an iframe again, and the iframe now works without jumping over to the phone's browser, as it was doing before, and the iframe works consistently in both iOS and Android.

2 things changed from the time that iframes were broken to when they started working:

1. I upgraded to Cordova 2.5

2. I started dynamically creating/adding the iframe to the page using jquery, rather than just unhiding an already-existing iframe, as I was doing initially:

   $('<iframe src="whatever.com" height="100%" width="100%" frameborder="0"></iframe>').appendTo('body'); .

I didn't bother checking whether it was #1 or #2 that fixed the iframe issue (I'm guessing it's #1), but I thought I would post that it IS possible to get iframes working with a PhoneGap/Cordova app, in case someone else runs into the same problem.

Answer 3

The same thing now with iOS 8 is not working. I get the iFrame with no scrolling and overflowing on other divs. Tried various css styles but no solution. Works fine on Android apps. This is using the latest Phonegap build.