How can I open an iframe in a phonegap/cordova app

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.

When I run the app from a browser, everything works as expected - the iframe opens in the same page and loads the content from the second site.

When I run the webapp on an iPhone simulator using Cordova, when the iframe opens, iOS switches over to Safari and puts my app in the background.

Steps taken:

1. I added the second site to the "ExternalHosts" array in the Cordova.plist file.
2. I created a config.xml file next to the index.html file in the /www directory, according to the PhoneGap/Cordova documentation (https://build.phonegap.com/docs/config-xml).
3. I added a <preference name="stay-in-webview" value="true" /> tag to the config.xml file as a child of the main <widget> tag.

My suspicion is that it is not reading/using the config.xml file, but there could be something else... Does anyone have any ideas what I might be doing wrong?

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.